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欢迎 阅读 本 书 ， 本 书 是 一 本 以 现代 前 端 技 术 思想 与 理论 为 主要 内 
容 的 书 。 前 端 技术 发 展 迅 速 ， 涉 及 的 技术 点 很 多 ， 我 们 往往 需要 阅读 
很 多 本 书籍 才能 理解 前 端 技术 的 知识 体系 。 这 本 书 在 前 端 知 识 体系 上 
为 大 家 做 了 很 好 的 总 结 和 梳理 ， 涵 盖 了 现代 前 端 技术 绝 大 部 分 的 知识 
内 容 ， 包 括 前 端 技术 基础 、 开 发 调试 技术 、 前 端 相 关 协 议 、 三 层 结构 
演进 与 实践 、 响 应 式 网 站 、 页 面 交 互 框架 、 大 型 项 目 实践 经 验 、 跨 材 
开发 实践 等 ， 这 些 都 能 使 大 家 获得 成 为 高 级 前 端 工 程 师 或 架构 师 所 必 
须 具 备 的 思维 和 能 力 。 


目标 读者 
本 书 主要 面向 各 类 前 端 工程 师 。 


初中 级 前 端 工程 师 们 可 以 通过 本 书 快 速 地 领略 到 前 端 领域 的 深度 
和 广度 ， 把 握 整 个 前 端 技术 领域 的 发 展 方向 和 所 涵盖 的 绝 大 多 数 授 术 
要 点 ， 为 未 来 深入 学 习 前 端 知识 提 供 指 导 和 方向 。 当 然 ， 笔 者 还 是 建 
议 你 在 有 一 定 前 端 技术 基础 的 前 提 下 再 来 阅读 本 书 ， 因 为 这 并 不 是 一 
本 入 门 的 工具 类 书籍 ， 对 基础 知识 讲解 较 少 。 如 果 你 已 经 是 高 级 前 站 
工程 师 ， 也 希望 你 通过 本 书 了 解 到 自己 在 前 端 知 识 体系 中 没有 掌握 的 
内 容 。 笔 者 欢迎 你 对 本 书 的 内 容 提出 建议 ， 帮 助 我 指出 书 中 的 不 足 ， 
补充 书 中 没有 涉及 的 内 容 。 


写作 目的 


本 书 的 写作 目的 是 希望 通过 笔者 对 现代 前 端 知识 体系 的 剖析 来 帮 
助 那些 需要 快速 成 长 和 提升 的 前 端 读 者 们 ， 为 他 们 提供 一 个 系统 的 知 
识 体系 和 明确 的 学 习 方 向 ， 快 速 了 解 现代 前 端 所 涉及 的 主要 知识 点 ， 
把 握 前 端 知 识 体系 结构 的 整个 脉络 。 前 端 入 门 很 简单 ， 但 是 优秀 的 前 
端 工程 师 却 很 少 ， 如 果 你 希望 变 得 更 优秀 ， 那 你 一 定 会 需要 这 本 书 。 
如 果 你 觉得 自己 已 经 很 优秀 ， 也 可 以 阅读 本 书 进一步 梳理 知识 体系 ， 
帮助 自己 查 缺 补漏 。 


不 希望 你 购买 本 书后 因为 工作 忙 而 翻 几 页 便 将 它 一 直 放 在 某 个 角 
落 ， 所 以 ， 本 书 会 用 尽量 少 的 篇 幅 和 浅显 的 语句 让 大 家 掌握 最 核心 的 
技术 思想 ， 少 数 偏 理论 的 细节 不 会 展开 太 多 ， 只 将 其 中 最 关键 的 部 分 
讲 清楚 。 如 果 大 家 希望 上 有 一 本 更 全 面 、 更 清晰 的 书籍 ， 笔 者 后 期 也 会 
在 本 书 的 基础 上 深入 展开 。 


总 之 ， 本 书 的 写作 目的 是 ， 希 望 区 别 于 基础 入 门 的 工具 书 而 从 实 
质 上 帮助 所 有 的 前 端 读 者 们 快速 理解 前 端 技 术 知 识 体系 ， 培 养 自身 更 
完善 的 体系 化 思维 ， 掌 握 更 多 灵活 的 前 端 代码 架构 技术 。 最 后 ， 衷 心 
希望 这 本 书 能 真正 帮助 需要 知识 引导 的 同学 ， 起 到 一 个 学 习 启 蒙 的 作 
用 ， 也 希望 大 家 多 多 支持 这 本 书 。 


写作 背景 


LU 
LU 


随 着 互联 网 的 持续 发 展 和 网 络 信息 的 多 样 化 ， 我 们 对 网 络 信 息 的 
获取 量 越 来 越 大 ， 获 取 方 式 越 来 越 多 ， 获 取 媒 介 种 类 也 越 来 越 复 杂 。 
就 目前 而 言 ， 我 们 生活 的 方方面面 都 与 互联 网 息息相关 ， 通 信 、 娱 


乐 、 购 物 、 企 业 服务 等 均 已 成 为 每 天 生活 中 不 可 或 缺 的 部 分 。 就 获取 
言 息 的 媒介 来 看 ， 终 端 设备 (主要 包括 个 人 电脑 、 智 能 手机 、 平 板 电 
脑 等 ) 是 我 们 从 互联 网 上 获取 信息 的 最 主要 媒介 。 


与 此 同时 ， 互 联网 信息 展现 的 内 容 和 形式 越 来 越 偏向 于 终端 设备 
屏幕 ， 而 且 基 于 终端 设备 的 交互 越 来 越 多 ， 越 来 越 复杂 。 目 前 在 终端 
设备 屏幕 上 ， 获 取 互 联网 信息 的 最 主要 途径 仍然 是 通过 Web 浏 览 
(或 内 同 浏 览 器 WebView， 下 文中 统称 为 Web 浏 览 器 ) ， 网 络 信息 在 
Web 浏 览 器 上 是 以 Web 应 用 的 形式 展现 的 。 随 着 信息 量 的 增 大 和 信息 
多 样 化 增加 ，Web 浏 览 器 应 用 也 越 来 越 复 杂 ， 规 模 越 来 越 庞大 ， 原 有 
的 由 后 人 台 服 务 器 直接 产生 网 页 数据 的 技术 已 经 不 能 满足 需要 。 


在 我 国 ， 随 着 2000 年 左右 第 一 批 互 联网 企业 的 崛起 ， 中 国 互 联网 
累积 输出 的 网 络 信息 量 越 来 越 大 ， 用 户 数 越 来 越 多 ， 信 息 业 务 也 越 来 
越 多 样 化 。 国 内 许多 第 一 批 从 事 网 站 开发 的 技术 人 员 渐 渐 意 识 到 Web 
浏览 器 端 业务 信息 处 理 逻 辑 的 复杂 ， 因 此 他 们 不 能 把 主要 精力 只 集中 
在 服务 器 闯 的 数据 收集 和 处 理工 作 上 。 任 何 一 项 复杂 工作 简单 化 的 最 
好 方式 必然 是 分 工 ， 在 这 种 情况 下 ， 第 一 批 半 职 业 的 前 端 工程 师 出 现 
了 ， 上 有 具体 时 间 可 以 大 致 认为 是 web 2.0 时 代 开 始 的 时 候 ， 也 就 是 说 ， 国 
内 的 前 端 工程 师 可 以 认为 是 在 以 用 户 原创 产生 内 容 (User Generated 
Content，UGC) 为 主 的 互联 网 应 用 网 站 产生 时 开始 出 现 的 。 不 仅 如 
此 ， 在 UGC 应 用 大 行 其 道 的 时 代 ， 各 类 电子 商务 网 站 的 秆 勃发 展 又 大 
大 增加 了 互联 网 企业 对 前 端 工程 师 的 需求 。 


随 着 互联 网 的 普及 ， 社 区 和 电 商 的 监 海中 涌现 出 了 无 数 的 互联 网 
企业 ， 这 类 企业 中 的 大 部 分 目前 仍然 是 以 利用 Web 浏 览 器 与 用 户 进行 
言 息 区 互 为 主要 业务 ， 用 来 完成 用 户 的 信息 消费 。 自 2008 年 开始 ， 移 
动 互联 网 的 另 一 波浪 潮 让 互联 网 行业 的 发 展 如 日 中 天 ， 整 个 国内 外 互 


联网 行业 一 片 欣 欣 向 荣 。 与 此 同时 ， 为 数 不 多 的 前 端 工程 师 和 呈 指 数 
增长 的 前 端 工程 师 需 求 量 形成 了 巨大 的 产业 人 力 资 源 矛 盾 。 不 少 互联 
网 公司 因为 业务 发 展 需 要 ， 鼓 励 大 量 服务 端 工程 师 向 前 端 工程 师 转 型 
来 填补 前 端 人 力 的 空缺 。 直 至 今天 ， 前 端 工 程 师 的 数量 仍然 远 远 不 能 
满足 企业 的 发 展 需要 ， 不 过 与 UGC 时 代 相 比 ， 前 端 工程 师 的 数量 有 了 
一 定 的 提升 。 与 此 同时 ， 互 联网 应 用 场景 的 复杂 化 也 提高 了 企业 对 前 
端 工程 师 基 本 能 力 的 要 求 ， 一 部 分 初级 前 端 工 程 师 仍然 不 能 胜任 企业 
的 工作 ， 而 优秀 的 前 端 工程 师 一 将 难 求 。 


面 对 这 种 形势 ， 笔 者 觉得 ， 目 前 缺乏 优秀 前 端 工 程 师 的 主要 因素 
有 以 下 两 点 。 


前 端 专业 教育 引导 资源 的 稀缺 


可 以 认为 ， 前 端 工程 师 培 养 起 来 难度 大 ， 和 前 端 教育 学 习 资 源 的 
的 关 庆 是 交大 全 门 风 前 虹 方 向 遇 训 有 向 ， 相 忌 有 文 种 模式 
下 的 人 才 培 养 专业 度 和 产 出 完全 不 如 人 意 。 笔 者 的 感觉 是 ， 一般 毕 业 
就 被 选拔 进入 大 型 互联 网 公司 且 技 术 能 力 相 对 较 强 的 前 端 工程 师 都 是 
通过 平时 自学 进入 这 一 领域 的 。 笔 者 很 明白 前 端 学 习 的 困难 ， 所 以 如 
果 有 充足 的 前 端 教育 资源 来 引导 ， 结 果 就 有 可 能 不 一 样 。 


前 端 领域 的 技术 革新 速度 快 ， 对 前 端 工程 师 的 要 求 越 来 越 


高 
真正 了 解 前 端 技术 的 工程 师 都 会 感觉 前 端 技 术 发 展 变 化 远 快 于 其 
他 端 。 浏 览 器 特性 、 编 程 语言 标准 、 前 端 框架 、 前 端 工 具 、 多 终端 济 


览 器 等 都 在 快速 地 换代 更 新 。 作 为 一 名 前 端 工程 师 ， 不 仅 要 掌握 现 有 
的 技术 来 实现 业务 需求 ， 解 决 业务 问题 ， 还 要 不 断 快速 学 习 新 的 技术 
知识 ， 为 新 扩 术 时 代 的 到 来 做 准备 。 对 于 后 接触 的 人 来 说 ， 需 要 了 解 
掌握 的 东西 会 越 来 越 多 。 


所 以 希望 本 书 所 讲解 的 前 端 体系 化 内 容 能 够 降低 前 端 从 业 人 员 的 
学 习 成 本 ， 帮 助 读 者 快速 从 宏观 上 把 握 前 端 知识 体系 结构 的 整个 脉 
络 。 


主要 内 容 


本 书 一 共 分 7 章 ， 每 一 章 的 主要 内 容 如 下 所 述 。 


第 1 章 ， 主 要 介绍 现代 Web 应 用 的 发 展 概况 和 相关 的 技术 知 
识 ， 同 时 也 深入 总 结 目前 主要 浏览 器 的 基础 原理 知识 与 常用 
的 前 端 开 发 调试 技术 。 

第 2 章 ， 主 要 讲解 了 前 端 技术 的 相关 协议 ， 包 括 HTTP、 


HTTP2、HTTPS、Web 实 时 协议 、 前 端 安全 机 制 、RESTful 规 
范 和 和 Hybrid 混合 应 用 交互 协议 等 。 


第 3 章 ， 以 前 端的 三 层 结构 发 展演 进 和 实践 技术 为 主 ， 讲 解 
HTML5、ECMAScript 5+、CSS3 的 发 展 历程 和 特性 ， 同 时 介 
绍 现代 前 端 开 发 中 的 编译 技术 和 响应 式 站 点 的 设计 思路 。 


第 4 章 ， 主 要 讲解 前 端 交互 框架 的 演进 和 各 类 前 端 框架 的 实现 
原理 ， 包 括 直接 型 DOM 交 互 框架 、MVC、MVP、MVVM、 
Virtual DOM、MNV 炒 等 框架 的 设计 思路 。 


第 5 章 ， 以 专题 的 方式 讲解 现代 前 端 大 型 项 目的 实践 思路 ， 主 
要 包括 开发 规范 、 组 件 化 规范 、 构 建 原理 、 用 户 数 据 分 析 、 
前 端 优化 手段 、 搜 索引 擎 优化 基础 等 内 容 。 


第 6 章 ， 围 绕 跨 栈 主题 介绍 前 端 技术 栈 在 后 端 和 移动 端 Hybrid 
上 的 开发 实践 例如， 后 端 直 出 同 构 原 理 、Hybrid 离 线 包 与 
增 量 机 制 实现 等 关键 架构 的 设计 思路 。 


第 7 章 ， 就 前 端的 未 来 趋势 进行 分 析 ， 简 单 介 绍 物 联 网 Web 
化 、Web VR、 网 站 人 工 智 能 等 未 来 的 前 端 技术 趋势 ， 总 结 
为 一 名 优秀 前 端 工程 师 的 要 素 。 


相信 读者 们 看 到 这 里 就 会 兴奋 起 来 ， 因 为 本 书 涵盖 了 现代 前 端 中 
大 部 分 需要 掌握 的 技术 实践 理念 ， 这 也 是 编写 本 书 的 初 表 。 相 比 于 深 
入 介绍 具体 某 一 个 前 端 框 架 的 书籍 ， 这 本 书 能 带 给 读者 体系 化 思维 和 
技术 理念 上 的 提升 ， 因 为 前 端 学 习 不 是 学 会 某 个 框架 就 可 以 了 。 


写作 声明 


关于 本 书 的 内 容 ， 在 此 声明 如 下 。 


1. 书 中 所 涉及 的 内 容 均 为 基于 笔者 理解 之 上 的 原著 输出 ， 部 分 内 
容 如 有 雷同 ， 属 于 共性 知识 。 

2. 书 中 提出 了 一 些 自 定义 概念 ， 可 能 之 前 没有 被 提出 ， 请 读者 认 
真理 解 。 


3. 书 中 涉及 技术 原理 类 的 内 容 较 多 ， 并 不 是 只 介绍 某 个 特定 框架 
的 工具 类 书籍 ， 建 议 读者 在 有 一 定 前 端 技术 基础 的 前 提 下 阅读 ， 本 书 
的 编写 宗旨 是 提高 前 端 工程 师 的 体系 思维 和 设计 能 力 ， 而 不 是 帮 大 家 
快速 入 门 ]。 


4. 本 书 使 用 的 全 部 样 例 代 码 均 基 于 ECMAScript 6 十 环境 ， 需 要 较 
高 版 本 的 浏览 器 或 Node 服 务 器 的 运行 支持 。 


5. 本 书 涉 及 的 知识 点 量 大 ， 酒 盖 沁 围 广 ， 对 相关 基础 知识 细节 的 
展开 不 会 过 于 详细 ， 但 对 于 每 种 技术 的 实现 都 有 较 深 入 的 原理 性 分 
析 ， 和 希望 读者 认真 阅读 领会 。 
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张 成 文 


读者 服务 


轻松 注册 成 为 博文 视点 社区 用 户 (www.broadview.com.cn) ， 您 
即 可 享受 以 下 服务 : 


提交 勘误 ”您 对 书 中 内 容 的 修改 意见 可 在 【提交 勘误 】 处 提 
交 ， 若 被 采纳 ， 将 获 赠 博文 视点 社区 积分 (在 您 购买 电子 书 
时 ， 积 分 可 用 来 抵 扣 相应 金额 ) 。 


与 作者 交流 ”在 页 面 下 方 【 读 者 评论 】 处 留 下 您 的 疑问 或 观 
点 ， 与 作者 和 其 他 读者 一 同学 习 交 流 。 


页 面 入 口 : http://www.broadview.com.cn/31033 


二 维 码 : 


专家 推荐 


近 几 年 前 端 技术 发 展 迅 猛 ， 各 大 公司 对 前 端 优秀 人 才 的 需求 急剧 
增加 。 本 书 从 一 名 一 线 专业 前 端 从 业者 的 角度 ， 面 面 俱 到 地 为 大 家 剖 
析 了 当前 Web 前 端 所 需要 具备 的 各 种 现代 技术 。 无 论 是 从 网 络 、 浏 览 
器 方面 ， 还 是 从 工程 化 、 团 队 协 作 的 角度 都 给 出 了 非常 好 的 呈现 ， 非 
单 值得 大 家 阅读 。 


郭 学 享 (Henry) ， 腾 讯 前 端 IMWeb 团 队 负 责 人 


近 几 年 ， 有 关 前 端的 书籍 很 少 能 全 面 而 且 深 入 地 介绍 前 端 技术 思 
想 与 理论 相关 内 容 ， 大 部 分 都 是 独立 拆 分 介绍 前 端 单 点 领域 的 技术 
栈 。 这 本 书 以 现代 前 端 技术 思想 与 理论 为 主 ， 详 细 而 且 深 入 ， 但 又 通 
俗 地 向 读者 阐述 了 现代 前 端 技术 栈 ， 无 论 对 初学 者 还 是 中 级 学 者 都 是 
值得 一 读 的 好 书 。 读 者 可 以 通过 本 书 快速 领略 到 前 端 领域 的 深度 和 广 
度 ， 把 握 整 个 前 端 技术 领域 所 涵盖 的 绝 大 多 数 知 识 技术 要 点 和 发 展 方 
向 ， 为 未 来 深入 学 习 前 端 知识 提供 指导 和 方向 。 


大 浇 ，W3cplus.com 站 长 
现 如 今 ， 前 端 已 经 不 再 是 一 种 “新 兴 职 业 ”， 对 技术 系统 且 全 面 的 


追求 愈 显 重要 ， 但 繁杂 的 技术 体系 及 各 种 旁 支 经 常 让 初学 者 无 所 适 
从 。 本 书 能 从 全 局 和 主流 的 视野 介绍 前 端 职业 工程 师 几 乎 涉猎 的 所 有 


知识 ， 并 将 前 端 工 作 中 涉及 的 解决 方案 分 门 别 类 ， 抽 象 成 易于 理解 的 
思路 。 相 信 对 前 端 感 兴趣 的 读者 一 定 能 够 借助 这 本 难得 的 好 书 触 类 旁 
通 ， 一帆风顺 地 推 开 通 往 前 端 界 的 神秘 大 门 ， 快 速 地 成 为 一 名 优秀 的 
前 端 工 程 师 。 


许诺 (Darksnow) ， 阿 里 巴巴 前 端 无 线 开发 专家 


本 书 从 一 名 前 端 工程 师 的 角度 ， 梳 理 了 现代 前 端 技术 所 涉及 的 基 
础 知识 体系 和 原理 性 技术 解析 ， 包 括 开 发 方式 的 变更 、 前 端 框架 的 演 
进 、 前 端 跨 栈 技术 以 及 未 来 的 VR 等 ， 问 合 当 前 流行 的 “大 前 端 " 概 念 ， 
非常 适合 读者 扩 宽 个 人 知识 面 。 另 外 ， 作 者 本 人 在 前 端 方面 有 很 深 的 
造 讶 ， 对 目前 的 一 些 前 端 问题 有 深入 的 研究 和 个 人 独特 的 见解 。 相 信 
读者 朋友 们 一 定 能 从 本 书 中 收获 顾 多 。 


邓 海 龙 (Helon) ， 腾 讯 前 端 IMWeb 团 队 成 员 


前 端 技术 日 新 月 异 且 涉 及 的 知识 面 较 广 泛 ， 对 于 初学 者 来 说 又 不 
知 从 何 学 起 、 所 学 的 东西 是 否 已 经 过 时 。 对 于 中 级 学 者 ， 可 能 又 存在 
对 某 些 知识 的 了 解 不 够 全 面 和 深刻 的 问题 。 本 书 由 前 端 技术 的 发 展 历 
程 向 整体 架构 体系 逐 层 展开 ， 基 本 涵盖 了 现 阶段 的 前 端 技能 树 ， 为 前 
端 学 习 者 指明 了 方向 。 同 时 ， 本 书 注重 从 原理 的 层面 进行 知识 点 的 解 
析 ， 万 变 不 离 其 宗 ， 各 种 框架 或 技术 之 间 的 很 多 思想 是 相通 的 ， 把 握 
住 这 一 点 ， 将 对 读者 后 续 的 学 习 更 有 帮助 。 


李 双 双 (Lissa) ， 腾 讯 前 端 工程 师 
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2.2.4 HTTPS 协 议 解 析 


i CKEetL 已 
2.3.2 Pol 和 Long-poll 
2.3.3 前 区 DDP 功 议 


25 与 Native 交 互 协议 


5. 人 人 App ee 
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4.2 MV* 交 互 模式 
421 ”前端 MVC 模 
4.2.2 ”前 端 MVP 模 式 


4.2.3 


5.14 ECMAScript 5 党 


5.1.5 Maa 6+ 参 


5.2.3 ”项目 设计 规范 


5.6.4 robots 
2.6.5 sitemap 


6.2.1 Hybrid 技术 趋势 
6.2.2 Hybrid 实现 方式 
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第 1 章 Web 前端 拷 术 基础 


前 端 技 术 自 诞 生 以 来 ， 就 一 直 保 持 着 较 快 的 发 展 速度 。 与 此 同 
时 ， 前 端 技术 的 快速 发 展 对 前 端 工 程 师 的 要 求 也 越 来 越 高 。 到 目前 为 
止 ， 除 了 浏览 器 的 应 用 复杂 度 在 提升 ， 前 端的 开发 模式 也 在 不 断 演 
进 。 前 端 开 发 模式 先后 经 历 了 静态 黄页 时 期 、 服 务 器 组 装 动态 网 页 数 
据 时 期 、 后 端 为 主 的 MVC (Model-View-Controller， 一 种 数据 模型 、 视 
图 、 人 逻辑 分 离 的 开发 模式 ) 模式 时 期 、 前 后 端 分 离 方案 开发 时 期 、 纯 
前 端 MV* 〈Model-View- 米 ， 数 据 模 型 、 视 图 、 控 制 方 式 分 离 的 开发 设 
计 方 式 ， 这 里 的 控制 方式 有 多 种 实现 方法 ， 所 以 一 般 用 米 代 替 ) 为 主 
与 中 间 层 直 出 的 时 期 ， 最 后 进入 到 前 端 Virtual DOM (虚拟 DOM， 用 来 
苗 述 页 面 DOM 树 节点 之 间 关 系 的 一 种 特殊 JavaScript 对 象 ) 、MNV* 
(Model-NativeView- 炒 ， 数 据 模型 、 原 生 视 图 、 控 制 方式 分 离 的 开发 
设计 模式 ， 这 里 的 控制 方式 也 可 以 有 多 种 实现 方法 ， 所 以 用 米 代替 ) 
模式 以 及 前 后 端 同 构 的 开发 时 代 。 可 能 你 对 这 些 内 容 还 不 熟悉 ， 不 过 
不 用 担心 ， 在 后 面 的 章节 中 将 会 详细 为 大 家 介绍 。 


工 欲 善 其 事 ， 必 先 利 其 器 。 为 了 更 好 地 学 习 和 了 解 后 面 的 知识 ， 
我 们 有 必要 先 来 了 解 现代 Web 前 端 技 术 的 发 展 概况 和 Web 浏 览 器 的 基础 
开发 技术 。 在 这 一 章 中 ， 我 们 就 先 来 了 解 一 下 Web 应 用 技术 基础 及 其 发 
展 概 况 。 


1.1 ”现代 Web 前 端 技术 发 展 概述 


1.1.1 现代 web 前 端 技术 应 用 


互联 网 信息 呈现 的 方式 越 来 越 偏向 于 终端 设备 屏幕 ， 而 且 终端 设 
备 屏幕 上 的 交互 也 越 来 越 多 ， 越 来 越 复 杂 。 如 图 1-1 所 示 ， 如 今 我 们 获 
取 网 络 信息 的 设备 种 类 越 来 越 多 ， 除 了 借助 传统 的 个 人 计算 机 来 访问 
网 络 ， 还 可 以 通过 智能 手机 、 平 板 电脑 或 穿戴 设备 等 来 获取 网 络 信 
息 。 
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图 1-1 现代 网 络 信息 主要 访问 媒介 


而 在 众多 不 同 终端 设备 屏幕 上 ， 获 取 互 联网 信息 的 最 主要 途径 仍 
然 是 web 浏 览 器 (内 髋 浏览 器 WebView， 后 面 统 称 为 Web 浏 览 器 ) ， 网 
络 信息 内 容 在 web 浏览 器 上 最 终 是 以 web 应 用 的 形式 展现 的 。 


如 今 ， 互 联网 Web 浏 览 器 上 的 应 用 已 经 变 得 十 分 庞杂 ， 接 下 来 我 们 
将 通过 一 个 具体 的 例子 来 了 解 现代 Web 浏 览 器 应 用 的 具体 发 展 是 怎么 样 
的 。 


图 1-2 是 目前 一 个 非常 典型 的 浏览 器 端 Web 应 用 一 一 腾讯 课堂 的 首 
页 部 分 用 户 界 面 。 注 意 ， 这 只 是 一 部 分 ， 整 个 页 面 的 内 容 很 长 很 复 
杂 ， 可 操作 的 部 分 也 很 多 ， 我 们 只 截取 了 头 部 导航 的 一 部 分 内 容 进行 
分 析 。 从 用 户 界面 上 来 看 ， 这 部 分 其 实 已 经 包含 了 很 多 的 数据 内 容 和 
用 户 交 互 ， 可 见 ， 不 同 于 十 年 前 网 页 端的 应 用 ， 现 在 浏览 器 上 的 应 用 
实现 已 经 非常 复杂 了 。 
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图 1-2 腾讯 课堂 桌面 浏览 器 端 首页 部 分 用 户 界 面 


在 这 个 页 面 中 ， 浏 览 器 发 起 的 直接 网 络 请 求 多 达 190 个 ， 图 片 请 求 
约 为 160 个 ， 在 带 有 大 量 高 清 图 片 下 载 的 条 件 下 ， 页 面 内 容 体积 大 小 大 
约 只 有 2.2MB ， 平 均一 个 请 求 大 约 只 有 11.6KB ， 通 过 用 户 操作 触发 的 
间接 网 络 请 求 数 可 以 达到 上 千 个 ， 而 在 没有 使 用 浏览 器 缓存 的 情况 
下 ， 从 用 户 打开 页 面 网 址 请 求 到 浏览 器 页 面 显示 内 容 却 只 用 了 
480~520ms。 需 要 做 到 这 些 是 一 件 很 不 容易 的 事情 ， 很 多 方面 都 需要 考 
虑 。 首 先 ， 网 页 数据 内 容 多 的 情况 下 代码 怎么 实现 ? 请 求 数 目 大 时 怎 
么 做 到 快速 加 载 ? 图 片 请 求 数 多 时 内 容 体 积 怎样 做 到 尽 可 能 小 ? 网 页 
体积 大 时 怎样 在 500ms 内 展示 给 用 户 ? 用 户 操作 种 类 繁杂 时 怎么 去 管理 
实现 .……. 然 而 ， 我 们 要 明白 的 是 ， 这 个 用 户 首 页 也 只 是 一 个 相对 比较 
复杂 的 页 面 ， 还 有 比 这 更 加 复杂 且 内 容 更 多 的 网 页 ， 那 我 们 又 该 怎样 
来 解决 这 些 问题 呢 ? 


现代 前 端 Web 应 用 内 容 变 得 更 加 庞杂 ， 通 常 也 是 以 多 平台 的 形式 展 
现 。 仍 以 腾讯 课堂 的 应 用 为 例 ， 腾 讯 课堂 首页 在 移动 端 浏览 器 下 展示 
的 部 分 用 户 界 面 如 图 1-3 所 示 。 在 移动 端 ， 用 户 打开 页 面 时 默认 加 载 的 
内 容 大 小 不 到 100KB ， 页 面 内 容 全 部 加 载 完成 时 总 请 求 数 约 为 50 个 ， 
总 内 容 大 小 约 为 200KB ， 页 面 中 除 图 片 外 主要 的 内 容 请 求 不 到 10 个 ， 
在 无 缓存 的 情况 下 页 面 内 容 平 均 加 载 时 间 约 为 1000ms。 和 桌面 端 浏览 
器 (这 里 主要 指 个 人 计算 机 上 面 安装 运行 的 浏览 器 ) 加 载 的 内 容 相 比 
有 些 不 同 ， 页 面 请 求 数量 和 体积 大 幅 减 小 ， 页 面 内 容 结 构 也 显得 更 加 
简单 ， 但 是 加 载 时 间 却 更 长 了 ， 这 又 是 为 什么 呢 ? 
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歌唱 中 气息 的 运用 PS 大 神 炼 成 记 ( 绪 下 一 
对 一 精品 课 ) 


图 1-3 ”腾讯 课堂 移动 浏览 器 端 首页 部 分 用 户 界 面 


先 不 急于 回答 这 些 问 题 ， 从 整体 上 来 看 ， 和 互联 网 应 用 初始 阶段 
的 静态 页 面相 比 ， 现 代 Web 浏 览 器 应 用 具有 一 些 明 显 的 特点 ， 例 如 页 面 
内 容 更 加 复杂 、 用 户 交 互 更 多 、 涉 及 的 平台 更 广 、 用 户 的 访问 实时 性 
要 求 更 高 等 。 上 面 的 案例 只 是 现代 web 前 端 应 用 的 一 个 缩影 ， 也 是 一 个 
非常 典型 的 应 用 案例 。 要 解决 以 上 的 这 些 问题 ， 我 们 需要 先 了 解 一 些 
必要 的 前 端 技术 知识 。 


1.1.2 ”现代 web 前 端 技术 概述 


为 了 解决 上 一 节 中 的 问题 ， 我 们 从 以 下 几 个 方面 来 思考 。 


O 


页 面 内 容 多 而 复杂 ， 怎 样 保证 开发 效率 ? 通常， 在 前 端 项 目 实 
践 中 ， 我 们 需要 借助 符合 特定 场景 的 前 端 框架 来 提高 开发 效 
率 ， 例 如 使 用 jQuery、MVVM 等 开发 框架 ， 对 常用 的 HTML 
DOM (Document Object Model ， 文 档 对 象 模型 ， 是 指 HTML 
内 容 通 过 浏览 器 解析 后 建立 的 具有 节点 父子 关系 的 树 形 对 
象 ) 操作 进行 高 效 封 装 ， 大 大 简化 开发 工作 量 ， 提 高 效率 。 


document .getElementById('text') .innerHTML =' 这 是 一 段 文 本 ' 


在 jQuery 框架 里 面 就 可 以 如 下 简洁 高 效 地 实现 。 


$('#text') .html(' 这 是 一 段 文 本 ' ); 


O 


页 面 内 容 多 且 复 杂 ， 项 目的 管理 和 维护 该 如 何 去 做 ”前 端 项 目 
代码 越 来 越 多 ， 结 构 越 来 越 复杂 ， 如 何 实现 项 目的 管理 将 直 
接 决 定 后 期 的 维护 成 本 。 所 以 我 们 必须 考虑 用 模块 化 和 组 件 
化 的 思路 来 管理 ， 所 谓 的 模块 化 和 组 件 化 是 指 采 用 代码 管理 
中 分 治 的 思想 ， 将 复杂 的 代码 结构 拆 分 成 多 个 独立 、 简 单 、 
解 看 合 的 结构 或 文件 分 开 管理 ， 使 项 目 结构 更 加 清晰 。 例 
如 ， 某 新 闻 版 块 组 件 的 内 容 可 以 用 下 面 的 HTML 结 构 来 表示 。 


<section class="ui-news"> 


<h2> 这 是 新 闻 标题 </h2> 


[= 


<article> 这 是 第 一 篇 新 闻 标 题 </article> 


</section> 


如 果 页 面 的 内 容 增 多 ， 我 们 可 以 借助 Web Component (HTML5 的 
一 种 组 件 化 规范 ) 注册 一 个 <news> 的 标签 来 直接 引入 使 用 ， 然 后 再 使 
用 <news> 这 个 标签 来 代替 上 面 组 件 的 内 容 进 行 管理 维护 ， 页 面 中 其 他 
的 标签 内 容 也 可 以 这 样 来 处 理 。 


<news></news> 


// 实 际 引 入 组 件 news .html 的 内 容 

<section class="Uui-news"> 
<h2> 这 是 新 闻 标 题 </h2> 
<article> 这 是 第 一 篇 新 闻 标 题 </article> 


</section> 


co 页面 加 载 的 内 容 很 多 ， 怎 样 保证 尽快 将 网 页 内 容 显示 给 用 户 ? 
在 页 面 内 容 较 多 、 较 复杂 的 情况 下 ， 为 了 让 用 户 尽 可 能 快速 
看 到 内 容 ， 我 们 可 以 通过 异步 的 方式 来 实现 ， 即 将 一 部 分 内 
容 先 展示 给 用 户 ， 然 后 根据 用 户 的 操作 ， 有 异步 加 载 用 尸 需要 
的 其 他 内 容 ， 避 免 用 户 长 时 间 等 待 。 


o 怎样 限制 页 面 内 图 片 的 大 小 以 保证 页 面 快 速 展示 ?通常 ， 网 页 
上 的 图 片 都 是 比较 大 的 ， 下 载 时 也 比较 消耗 流量 。 在 上 节 的 
这 个 用 户 首页 中 图 片 请 求 大 约 为 160 个 ， 那 么 我 们 怎样 保证 页 
面 下 载 时 消耗 的 流量 尽 可 能 小 呢 ? 这 可 能 就 需要 考虑 图 片 的 
优化 处 理 了 ， 如 使 用 更 高 压缩 比 webp 格 式 的 图 片 ， 在 图 片 质 
量 不 降低 的 情况 下 ， 可 以 大 幅度 减 小 图 片 的 网 络 流量 消耗 ， 
提高 图 片 加 载 速度 。 


<img src="/path/photo.webp" alt=" 更 高 压缩 比 的 图 片 "> 


对 于 重复 打开 的 页 面 ， 能 否 让 浏览 器 不 再 向 服务 器 请 求 重 复 的 
内 容 呢 ? 其 实 合 理 地 利用 文件 缓存 就 能 做 到 这 一 点 ， 这 样 可 
以 大 幅度 提高 网 页 资源 的 加 载 速度 ， 而 且 幸 运 的 是 ， 浏 览 
默认 可 以 支持 文件 缓存 ， 对 于 一 段 时 间 内 浏览 器 的 重复 请 
求 ， 服 务 器 可 能 会 返回 HTTP 的 304 状 态 码 或 者 不 发 送 请 求 ， 
让 浏览 器 直接 从 本 地 读 取 内 容 。 


针对 上 一 节 中 关于 移动 端 提 出 的 最 后 一 个 问题 ， 如 果 页 面 地 址 
在 移动 端 浏 览 器 打开 ， 又 该 怎么 处 理 呢 ? 通常 ， 我 们 认为 移 
动 端 和 桌面 端 浏览 器 相 比 ， 有 以 下 几 个 明显 劣势 : 移动 端 设 
备 计算 资源 和 网 络 资源 比较 有 限 ; 移动 端 设备 CPU 处 理 速 度 
较 慢 且 网 速 也 相对 较 低 ， 加 载 和 解析 同样 的 内 容 需要 更 长 的 
时 间 ; 移动 端 浏览 器 受 屏幕 大 小 限制 ， 一 次 能 展示 的 内 容 有 
限 ; 移动 端 设备 通常 没有 键盘 和 鼠标 等 外 部 设备 ， 用 户 交 互 
的 难度 增 大 ; 移动 端 浏览 器 的 整体 性 能 不 如 果 面 端 浏览 

所 以 使 用 移动 端 浏览 器 打开 一 个 Web 页 面 时 ， 我 们 常常 会 考虑 
让 它 打 开 一 个 用 户 界 面 和 内 容 更 加 简洁 的 页 面 。 例 如 ， 在 移 
动 端 上 访问 桌面 浏览 器 端 腾讯 课堂 首页 https : 
//ke.qq.com/index.html 将 会 自 动 定 位 到 
https://m.ke.qq.conyindex.html 页 面 上 。 尽 管 这 样 可 以 让 移动 端 
浏览 器 加 载 更 少 的 内 容 ， 但 所 需要 的 时 间 还 是 比较 长 ， 仍 需 
要 进行 更 多 的 优化 来 提升 加 载 速度 。 


通过 思考 上 述 问题 ， 我 们 可 以 大 大 优化 用 户 访 问 页 面 时 的 体验 。 


与 此 同时 ， 也 涉及 了 前 端 开发 框架 、 模 块 化 和 组 件 化 开发 、 资 源 异步 


加 载 、 


响应 式 站 点 开发 、 缓存 和 前 庙 优 化 等 多 个 方面 的 技术 知识 。 


1.1.3 ”Web 前 端 技术 发 展 


除了 从 Web 应 用 的 角度 上 考虑 ， 我 们 也 可 以 从 前 端 工程 师 的 角度 出 
发 ， 通 过 一 段 代 码 来 看 看 现代 前 端的 一 些 特 点 。 作 为 一 个 前 端 工程 
师 ， 目 前 我 们 很 可 能 会 这 样 来 写 一 个 HTML 文 件 。 


<IDOCTYPE html> 
<html] lang="zh-cn" font-size="67.5px"> 
<head> 
<meta charset="utf-8"> 
<title> 页 面 标题 </title> 
<meta name="viewport" content="width=device-width,initial- 
scale=1.0,maximum-scale= 
1.0,user-scalable=no"> 
<meta name="format-detection" content="telephone=no"> 
<meta name="keywords" content=" 页 面 SEO 关键 字 "/> 
<meta name="description" content=" 页 面 的 描述 信息 "/> 
<meta itemprop="name" content=" 页 面 标 题 "> 
<meta itemprop="image" content="/img/ logo-rich.png" /> 


<meta http-equiv="Cache-Control" content="max-age=7200" /> 


<link rel="dns-prefetch" href="//my.domain.com"/> 

<link href="//my.domain.com/main.css" rel="stylesheet"> 
</head> 
<body> 


<header id="hd"> 


<video src="./a.m3u8" width="300" height="220"></video> 
</header> 
<section id="bd"> 
<picture> 
<source media="(min-width: 375px)" Ssrc="med- 
res.jpg"> 
<source media="(min-width: 414px)" src="high- 
res.jpg"> 
<img src="fallback.jpg" alt="picture"> 
</picture> 
</section> 
<footer id="ft"> 
<embed src="./rect.svg" width="300" height="100" 
type="image/svgt+xml1"/> 
<canvas id="canvas"></canvas> 
</footer> 
<script data-main="main" src="mod.js"></script> 
</body> 
</html> 


或 许 你 还 不 理解 这 里 每 一 行 代 码 的 意思 ， 也 不 了 解 为 什么 要 这 人 么 
写 。 那 么 ， 我 们 先 来 看 一 个 之 前 写 的 页 面 。 


<IDOCTYPE html] PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1i-transitional.dtd"> 
<html xmlns="http://www.w3.0rg/1999/xhtml"> 


<head> 


<meta http-equiv="Content-Type" content="text/html; 
charset=utf-8"/> 
<title> 网 站 标题 </title> 
<meta name="keywords" content=" 页 面 SEO 关键 字 "/> 
<meta name="description'" content=" 页 面 的 描述 "/> 
<meta http-equiv="Cache-Control" content="max-age=7200" /> 
<link href="//my.domain.com/main.css" rel="stylesheet"> 
</head> 
<body> 
<div id="hd"> 
<embed src="player.swf" width="300" height="220"> 
</embed> 
</div> 
<div id="bd"> 
<img src="fallback.jpg" alt="picture"> 
</div> 


<div id="ft"> 


</div> 

<script src="main.js"></script> 
</body> 
</html> 


相 比 这 个 更 早 的 网 页 结构 ， 我 们 现在 写 的 HTML 结 构 有 些 地 方 变 简 
单 了 ， 但 是 更 多 的 地 方 变 复杂 了 。 在 现代 浏览 器 页 面 开 发 中 ， 我 们 通 
常会 使 用 HTML5 的 新 规范 ， 这 样 能 够 一 定 程 度 上 简化 开发 过 程 ， 提 高 
开发 效率 ， 也 有 利于 搜索 引擎 进行 检索 。 当 然 这 些 只 是 基本 结构 模板 


的 举例 ， 在 现在 的 页 面 代码 中 ， 我 们 甚至 还 可 能 看 到 如 下 的 使 用 方 
法 。 


<link href="./x-image.html" rel="import"> 


<x-image width="300" height="200"></x-image> 


这 是 HTML5 中 组 件 化 Web Component 的 一 种 实现 方式 ， 它 通过 自 
定义 标签 的 方式 来 封装 一 部 分 独立 的 结构 功能 代码 块 。 另 外 在 Angular2 
框架 中 ， 前 端 页 面 组 件 也 可 以 定义 如 下 : 使 用 TypeScript 语 言 的 装饰 器 
特性 来 描述 声明 一 个 前 端 页 面 组 件 。 


@Component({ selector: 'my-app', 
template: <hello-form></hello-form>，, 
directives: [helloFormComponent] 


}); 


不 仅 如 此 ， 除 了 浏览 器 上 的 开发 ，JavaScript 前 端 脚本 语言 在 
Node.js (Node.js 是 一 个 基于 Chrome V8 引 警 的 JavaScript 运 行 环境 ， 使 
用 了 事件 驱动 、 非 阻塞 式 1/O 的 模型 ， 使 其 轻 量 又 高 效 ， 它 使 用 的 包 管 
理 器 为 npm， 是 目前 全 球 最 大 的 开源 库 生 态 系统 ) 服务 器 端 也 可 以 进行 
自由 高 效 的 开发 ， 例 如 结合 Koa (Koa 是 一 个 简洁 高 效 的 Node.js 端 Web 
框架 ) Web 框 架 ， 我 们 就 可 以 非常 便捷 地 加 载 中 间 件 创建 一 个 Web 服 务 
来 运行 。 


'use strict'; 


const http = require('http'); 


const koa = require('koa' ); 
const serve = require('koa-static'); 
const koaBody = require('koa-body'); 


const router = require('./routes'); 


// 创建 一 个 Koa 应 用 
const app = koa(); 


app.keys = ['site.com']; 


// 加 载 中 间 件 
app.use(serve('./pages')).use(serve('./static)); 
app.use(koaBody({ 
formidable: { 
uploadDir: dirname 
} 
})); 


app.use(router.routes( )); 


// 创建 服务 器 监听 
http.createServer(app.callback()).1listen(8000); 


console.log('Server listening on port 8000 ' ) ; 


这 些 示例 代码 中 涉及 了 一 些 EFCMAScript 6 十 标准 的 新 特性 ， 在 Web 
前 端 开发 实践 中 ， 这 些 新 的 特性 早已 经 深入 到 项 目 开 发 的 各 个 环节 当 
中 了 ，ECMAScript 6 十 和 原来 的 语言 规范 相 比 更 加 简洁 、 高 效 。 我 们 
知道 ， 前 端 技术 栈 中 的 JavaScript 语 言 不 仅 能 在 浏览 器 端 解析 ， 也 能 在 
Node.js 服 务 器 上 运行 ， 而 且 目 前 已 经 被 广泛 使 用 在 各 类 企业 后 端 服务 


中 。 但 是 这 里 要 说 的 是 ， 前 端 技 术 上 的 这 些 变 化 仅仅 发 生 在 四 年 之 
间 ， 而 且 这 里 列举 的 只 是 前 端 技术 变化 中 极 少 的 一 部 分 。 可 以 说 互联 
网 和 移动 互联 网 的 诞生 与 井喷 式 的 发 展 促进 了 前 端 技术 的 发 展 ， 带 来 
了 这 些 巨大 的 变化 。 我 们 不 能 确定 未 来 前 端 技 术 会 变 成 什么 样子 ， 但 
可 以 肯定 的 是 ， 从 现在 起 ， 四 年 后 又 将 是 完全 不 同 的 。 


我 们 必须 承认 ， 前 端 工程 师 需要 做 的 事情 远 不 只 是 将 一 个 设计 稿 
图 片 在 页 面 上 实现 这 么 简单 ， 仅 从 web 前 端 结构 的 开发 实现 模式 上 来 看 
就 已 经 发 生 了 翻天 覆 地 的 变化 。 


如 图 1-4 所 示 ， 前 端 结构 的 开发 实现 模式 先后 经 历 了 静态 黄页 时 
期 、 服 务 器 组 装 动态 网 页 数据 时 期 、 后 端 为 主 的 MVC 模 式 时 期 、 前 后 
端 分 离 时 期 、 纯 前 端 MV 米 为 主 和 中 间 层 直 出 时 期 、 前 端 Virtual 
DOM、MNV*、 前 后 端 同 构 时 期 。 


图 1-4 ”前端 应 用 开发 模式 演变 


Web 前 端的 概念 随 着 互联 网 的 出 现 而 产生 ，Web 页 面 结构 从 最 早 的 
静态 黄页 形式 ， 源 渐变 成 使 用 后 端 数 据 组 装 输出 动态 页 面 的 形式 。 数 
据 复杂 后 ， 出 现 了 以 后 端 语言 为 核心 的 MVC 开 发 模式 。 为 了 方便 管理 
更 复杂 的 Web 项 目 ， 有 人 提出 了 前 后 端 分 离开 发 管理 的 方案 ， 让 前 端 工 
程 师 能 够 专注 于 浏览 器 端的 交互 逻辑 实现 。 前 后 端 分 离 方式 出 现 后 ， 
前 端 快速 发 展 并 进入 了 以 纯 前 端 MV 米 框架 为 主 的 时 代 ， 现 在 前 端 则 可 
以 利用 更 加 灵活 且 与 组 件 化 结合 的 Virtual DOM 交 互 模式 来 实现 ， 或 者 
选择 前 后 端 同 构 、 路 终端 MNV 米 的 开发 模式 来 应 对 不 同 的 业务 场景 。 


由 此 说 明 ，Wweb 前 端 技 术 的 发 展 非常 迅速 而 且 已 经 发 生 了 巨大 的 变 
化 ， 但 通过 这 一 系列 的 变化 我 们 可 以 看 出 ， 前 端 从 无 到 有 且 发 展 到 现 
在 的 不 变 宗旨 是 ， 一 直 持 续 在 以 效率 和 质量 为 最 终 导 向 的 道路 上 探索 
前 进 ， 并 且 未 来 关于 Web 技 术 效 率 和 质量 这 两 方面 的 探索 仍 会 有 增 无 
减 。 效 率 方面 ， 从 前 后 端 分 离 到 出 现 各 种 封装 的 前 端 框架 ， 都 在 解决 
一 个 前 端 编程 开发 效率 的 问题 。 前 端 性 能 作为 前 端 质量 的 一 个 重要 部 
分 一 直 倍 受 关 注 ， 而 现在 前 端 Virtual DOM 和 MNV* 交 互 模式 等 的 实现 
思路 ， 就 是 为 解决 前 端 交 互 性 能 问题 而 出 现 的 。 当 然 这 仅仅 是 在 前 端 
开发 框架 上 做 出 的 完善 和 改进 ， 此 外 相关 前 端 工程 、 自 动 化 构建 、 组 
件 化 、 前 端 优化 等 技术 解决 方案 的 出 现 ， 也 为 现代 前 端 开 发 的 效率 和 
质量 提升 做 出 了 重要 的 贡献 。 


1.2 ”浏览 器 应 用 基础 
1.2.1 浏览 器 组 成 结构 


在 介绍 浏览 器 组 成 结构 之 前 ， 我 们 先 来 看 一 个 以 前 经 常 被 问 到 的 
问题 : 从 我 们 打开 浏览 器 输入 一 个 网 址 到 页 面 展示 网 页 内 容 的 这 段 时 
间 内 ， 浏 览 器 和 服务 端 都 发 生 了 什么 事情 ? 我 们 直接 来 看 一 个 相对 简 
洁 但 比较 清晰 的 过 程 描述 。 


o 在 接收 到 用 户 输 入 的 网 址 后 ， 浏 览 器 会 开启 一 个 线程 来 处 理 这 
个 请 求 ， 对 用 户 输入 的 URL 地 址 进行 分 析 判 断 ， 如 果 是 HTTP 
协议 就 按照 HTTP 方 式 来 处 理 。 


调用 浏览 器 引擎 中 的 对 应 方法 ， 比 如 WebView 中 的 loadUrl 方 
法 ， 分 析 并 加 载 这 个 URL 地 址 。 


通过 DNS 解 析 获 取 该 网 站 地 址 对 应 的 IP 地 址 ， 查 询 完成 后 连同 
浏览 器 的 Cookie、userAgent 等 信息 向 网 站 目的 IP 发 出 GET 请 
求 。 


进行 HTTP 协 议会 话 ， 浏 览 器 客户 端 向 Web 服 务 器 发 送 报 文 。 


进入 网 站 后 台 上 的 Web 服 务 器 处 理 请 求 ， 如 Apache、Tomcat、 
Node.js 等 服务 器 。 


进入 部 署 好 的 后 端 应 用 ， 如 PHP、Java、JavaScript、Python 等 
后 端 程序 ， 找 到 对 应 的 请 求 处 理 逻 辑 ， 这 期 间 可 能 会 读 取 服 
务 器 缓存 或 查询 数据 库 等 。 


服务 器 处 理 请 求 并 返回 响应 报 文 ， 此 时 如 果 浏 览 器 访问 过 该 页 
面 ， 缓 存 上 有 对 应 资源 ， 会 与 服务 器 最 后 修改 记录 对 比 ， 一 
致 则 返回 304， 否 则 返回 200 和 对 应 的 内 容 。 


浏览 器 开始 下 载 HTML 文 档 《响应 报头 状态 码 为 200 时 ) 或 者 
从 本 地 缓存 读 取 文件 内 容 (浏览 器 缓存 有 效 或 响应 报头 状态 
码 为 304 时 ) 。 


浏览 器 根据 下 载 接收 到 的 HTML 文 件 解析 结构 建立 DOM 

(Document Object Model， 文 档 对 象 模型 ) 文档 树 ， 并 根据 
HTML 中 的 标记 请 求 下 载 指定 的 MIME 类 型 文件 (如 CSS、 
JavaScript 脚 本 等 ) ， 同 时 设置 缓存 等 内 容 。 


o 页 面 开 始 解析 泻 染 DOM,，CSS 根 据 规 则 解析 并 结合 DOM 文 档 
树 进 行 网 页 内 容 布 局 和 绘制 泻 染 ，JavaScript 根 据 DOM API 操 
作 DOM， 并 读 取 浏 览 器 缓存 、 执 行事 件 绑 定 等 ， 页 面 整个 展 
示 过 程 完成 。 


整个 过 程 中 使 用 到 了 较 多 的 浏览 器 功能 ， 如 用 户 地 址 栏 输入 框 、 
网 络 请 求 、 浏 览 器 文档 解析 、 泻 染 引 擎 、JavaScript 执 行 引 擎 、 客 户 端 
存储 等 。 下 面 ， 我 们 具体 来 看 一 下 浏览 器 的 主要 结构 。 


如 图 1-5 所 示 ， 通 常 我 们 认为 浏览 器 主要 由 七 部 分 组 成 : 用 户 界 
面 、 网 络 、JavaScript 引 擎 、 泻 染 引 擎 、UI 后 端 、JavaScript 解 释 器 和 持 
久 化 数据 存储 。 用 户 界 面包 括 浏览 器 中 可 见 的 地 址 输入 框 、 浏 览 器 前 
进 返 回 按钮 、 打 开 书 签 、 打 开 历 史记 录 等 用 户 可 操作 的 功能 选项 。 浏 
览 器 引擎 可 以 在 用 户 界 面 和 泻 染 引 敬之 间 传 送 指令 或 在 客户 端 本 地 组 
存 中 读 写 数据 等 ， 是 浏览 器 中 各 个 部 分 之 间 相 互通 信 的 核心 。 浏 览 
泻 染 引擎 的 功能 是 解析 DOM 文 要 和 CSS 规 则 并 将 内 容 排版 到 浏览 器 中 
显示 有 样式 的 界面 ， 也 有 人 称 之 为 排版 引擎 ， 我 们 常 说 的 浏览 器 内 核 
主要 指 的 就 是 泻 染 引擎 。 网 络 功 能 模块 则 是 浏览 器 开启 网 络 线程 发 送 
请 求 或 下 载 资源 文件 的 模块 例如 DOM 树 解析 过 程 中 请 求 静 态 资源 首 
先是 通过 浏览 器 中 的 网 络 模块 发 起 的 ，UI 后 端 则 用 于 绘制 基本 的 浏览 
器 窗口 内 控件 ， 比 如 组 合 选择 框 、 按 钮 、 输 入 框 等 。JavaScript 解 释 器 
则 是 浏览 器 解释 和 执行 JavaScript 脚 本 的 部 分 ， 例 如 V8 引擎 。 浏 览 器 数 
据 持 久 化 存储 则 涉及 cookie、1localStorage 等 一 些 客户 端 存 储 技 术 ， 可 以 
通过 浏览 器 引擎 提供 的 API 进 行 调用 。 


浏览 器 引擎 三 一 > 据 

持 

| | 久 

化 

泻 染 引擎 存 

| | ] | 
网 络 JavaScript 引 擎 UI 后 端 


图 1-5 ”浏览 器 组 成 结构 


作为 前 端 开发 者 ， 我 们 需要 重点 理解 泻 染 引 擎 的 工作 原理 ， 灵 活 
运用 数据 持久 化 存储 技术 ， 因 为 实际 的 开发 工作 中 这 部 分 的 操作 比较 
多 ， 而 其 他 几 个 部 分 都 是 由 浏览 器 决定 的 ， 开 发 者 能 控制 的 部 分 相对 
较 少 。 接 下 来 我 们 就 重点 讲解 这 两 个 部 分 。 


目前 ， 用 户 使 用 的 主流 浏览 器 内 核 有 4 类 : Trident 内 核 ， 例 如 
Internet Explorer、360 浏 览 器 、 搜 狗 浏览 器 等 ，Gecko 内 核 ，Netscape 
6 及 以 上 版 本 ， 还 有 Firefox、 SeaMonkey 等 ; Presto 内 核 ， 主 要 是 
Opera 7 及 以 上 还 在 使 用 (Opera 内 核 原 来 为 Presto， 现 使 用 的 是 Blink 
内 核 ) ; Webkit 内 核 ， 主 要 是 Safari、Chrome 浏 览 器 在 使 用 的 内 核 ， 
也 是 特性 上 表现 较 好 的 浏览 器 内 核 。 另 外 ，Blink 内 核 其 实 是 WebKit 
的 一 个 分 支 ， 添 加 了 一 些 优化 新 特性 ， 例 如 跨 进程 的 iframe， 将 
DOM 移 入 JavaScript 中 来 提高 JavaScript 对 DOM 的 访问 速度 等 ， 目 前 
较 多 的 移动 端 应 用 内 族 的 浏览 器 内 核 也 渐渐 开始 采用 Blink。 


1.2.2 ”浏览 器 泻 染 引擎 简介 
泻 染 引 擎 的 主要 工作 流程 


泻 染 引 擎 在 浏览 器 中 主要 用 于 解析 HTML 文 档 和 CSS 文 档 ， 然 后 将 
CSS 规 则 应 用 到 HTML 标 签 元 素 上 ， 并 将 HTML 泻 染 到 浏览 器 窗口 中 以 
显示 具体 的 DOM 内 容 。 如 图 1-6 所 示 ， 浏 览 器 通过 网 络 模块 下 载 HTML 
文件 后 进行 页 面 解析 泻 染 ， 流 程 主要 包括 以 下 几 个 步骤 : 解析 HTML 构 
建 DOM 树 、 构 建 泻 染 树 、 泻 染 树 布 局 、 绘 制 演 染 树 。 


图 1-6” 泻 染 引擎 工作 流程 


解析 HIML 构 建 DOM 树 时 泻 染 引擎 会 先 将 HTML 元 素 标 签 解析 成 
由 多 个 DOM 元 素 对 象 节点 组 成 的 且 具 有 节点 父子 关系 的 DOM 树 结构 ， 
然后 根据 DOM 树 结构 的 每 个 节点 顺序 提取 计算 使 用 的 CSS 规 则 并 重新 
计算 DOM 树 结构 的 样式 数据 ， 生 成 一 个 带 样 式 摘 述 的 DOM 泻 染 树 对 
象 。DOM 泻 染 树 生 成 结束 后 ， 进 入 泻 染 树 的 布局 阶段 ， 即 根据 每 个 泻 
染 树 节点 在 页 面 中 的 大 小 和 位 置 ， 将 节点 固定 到 页 面 的 对 应 位 置 上 ， 
这 个 阶段 主要 是 元 素 的 布局 属性 (例如 position、float、margin 等 属性 ) 
生效 ， 即 在 浏览 器 中 绘制 页 面 上 元 素 节 点 的 位 置 。 接 下 来 就 是 绘制 阶 
段 ， 将 泻 染 树 节点 的 背景 、 颜 色 、 文 本 等 样式 信息 应 用 到 每 个 节点 
上 ， 这 个 阶段 主要 是 元 素 的 内 部 显示 样式 (例如 color、background、 
text-shadow 等 属性 ) 生效 ， 最 终 完成 整个 DOM 在 页 面 上 的 绘制 显示 。 


这 里 我 们 要 关注 的 是 演 染 树 的 布局 阶段 和 绘制 阶段 。 页 面 生成 
后 ， 如 果 页 面 元 素 位 置 发 生变 化 ， 融 要 从 布局 阶段 开始 重新 泻 染 ， 
也 就 是 页 面 重 排 ， 所 以 页 面 重 排 一 定 会 进行 后 续 重 绘 ， 如 果 页 面 元 
素 只 是 显示 样式 改变 而 布局 不 变 ， 那 么 页 面 内 容 改变 将 从 绘制 阶段 
开始 ， 也 称 为 页 面 重 绘 。 重 排 通常 会 导致 页 面 元 素 几 何 大 小 位 置 发 
生变 化 且 伴 随 着 重新 泻 梁 的 巨大 代价 ， 因 此 我 们 要 尽 可 能 避免 页 面 
的 重 排 ， 并 减少 页 面 元 素 的 重 绘 。 


泻 染 引擎 对 DOM 泻 染 树 的 解析 和 和 输出 是 逐 行进 行 的 ， 所 以 泻 染 树 
前 面 的 内 容 可 以 先 泻 染 展示 ， 这 样 就 保证 了 较 好 的 用 户 体验 。 另 外 也 
尽量 不 要 在 HIML 显 示 内 容 中 插入 script 脚 本 等 标签 ，script 标 签 内 容 的 
解释 执行 常常 会 阻塞 页 面 结 构 的 泻 染 。 


通常 情况 下 ， 不 同 浏览 器 内 核 的 解析 泻 染 过 程 也 略 有 不 同 ， 我 们 
以 Chrome、Safari 浏 览 器 的 Webkit 内 核 和 Firefox 浏 览 器 的 Gecko 内 核 为 
例 ， 来 看 看 泻 染 引擎 工 作 流 程 的 这 四 个 步骤 具体 是 怎样 完成 的 。 


图 1-7 和 图 1-8 分 别 为 Webkit 内 核 和 Gecko 内 核 演 染 DOM 的 主要 流 
程 。 可 以 看 出 ， 两 种 泻 染 引擎 工作 流程 的 主要 区 别 在 于 解析 HTML 或 
CSS 文 档 生 成 泻 染 树 的 过 程 : Webkit 内 核 中 的 HTML 和 CSS 解 析 可 以 认 
为 是 并 行 的 ;而 Gecko 则 是 先 解析 HTMIL， 生 成 内 容 Sink (Content Sink 
可 以 认为 是 构建 DOM 结 构 树 的 工厂 方法 ) 后 再 开始 解析 CSS。 这 两 种 
泻 染 引擎 工作 过 程 中 使 用 的 描述 术语 也 不 一 样 : Webkit 内 核 解析 后 的 泻 
染 对 象 被 称 为 泻 染 树 (Render Tree) ， 而 Gecko 内 核 解析 后 的 演 染 对 象 
则 称 为 Frame 树 (Frame Tree) 。 但 是 它们 主要 的 流程 是 相似 的 ， 都 经 
过 HTML DOM 解 析 、CSS 样 式 解 析 、 泻 染 树 生成 和 泻 染 树 绘 制 显 示 阶 
段 。 一 般 泻 染 引 擎 的 解析 过 程 中 都 包含 了 HTML 解析 和 CSS 解 析 阶 段 ， 


这 也 是 泻 染 引擎 解析 流程 中 最 重要 的 两 个 部 分 ， 接 下 来 就 看 看 HTML 文 
档 解析 和 CSS 规 则 解析 具体 是 怎样 进行 的 。 
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图 1-7 Webkit 内 核 泻 染 DOM 流 程 
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图 1-8 Gecko 内核 渲染 DOM 流 程 


CSS 解 析 


Style Sheets 


HTMIL 文档 解析 


HTML 文 档 解 析 过 程 是 将 HTML 文 本 字符 串 逐 行 解析 生成 具有 父子 
关系 的 DOM 节 点 树 对 象 的 过 程 ， 例 如 下 面 的 HTML 结 构 ， 通 过 解析 
HTML 文档 就 生成 了 如 图 1-9 所 示 的 由 多 个 不 同 DOM 元 素 对 象 组 成 的 
DOM 树 。 


HTMLHeadElement HTMLBodyElement 


HTMLMetaElement HTMLTitleElement HTMLElement [me | HTMLElement 
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图 1-9 ”DOM 结构 解析 示意 图 


<1DOCTYPE html> 
<htm] lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title> 页 面 标 题 </title> 
</head> 
<body> 
<header> 头 部 内 容 </header> 
<section> 
<div> 块 元 素 </div> 
<p> 段 落 </p> 
</section> 
<footer> 底 部 </footer> 
</body> 
</html> 


泻 染 引擎 在 HTML 解 析 阶 段 会 对 HTML 文 本 的 标签 进行 分 析 ， 同 时 
创建 DOM 对 象 ， 最 终生 成 图 1-9 所 示 的 DOM 对 象 树 。 需 要 注意 的 是 ， 
<header>、<nav>、 <section>、<footer> 这 些 布局 类 标签 的 DOM 类 型 均 
为 HTMLElement， 此 外 HTML 中 不 同 标签 的 每 个 元 素 对 应 的 原始 类 型 
也 可 以 是 不 一 样 的 。 


let element = document.getElementById( 'div'); 
let type = Object.prototype.toString.call(element).slice(8, -1); 
console.1log(type); // HTMLDivElement 


我 们 通过 这 一 段 代 码 就 可 以 获取 不 同 DOM 元 素 对 应 的 原始 类 型 
了 ， 和 HTML 标 准 一 样 ，DOM 元 素 的 原始 类 型 标准 也 是 由 W3C 组 织 指 
定 的 ， 具 体 更 多 常用 的 类 型 可 以 参考 下 面 的 内 容 。 


o ， 根 元 素 


<html> (HTMLHtmJLEJLement ) 


o 文件 数据 元 素 


<head> (HTMLHeadElement) 
<title> (HTMLTitleElement) 
<base> (HTMLBaseElement) 
<link> (HTMLLinkElement) 
<meta> (HTMLMetaElement) 


<style> (HTMLStyleElement) 


<script> (HTMLScriptElement) 


<noscript> (HTMLEl]ement) 


o 文件 区 域 元 素 


<body> (HTMLBodyElement) 

<section> (HTMLElement) 

<nav> (HTMLElement) 

<article> (HTMLElement) 

<aside> (HTMLElement) 

<h1> <h2> <h3> <h4> <h5> <h6> (HTMLHeadingElement) 
<hgroup> (HTMLElement) 

<header> (HTMLElement) 

<footer> (HTMLEJement ) 


<address> (HTMLElement) 


o ” 群 组 元 素 


<p> (HTMLParagraphElement) 

<hr> (HTMLHREl]ement) 

<pre> (HTMLPreElement) 
<blockquote> (HTMLQUOteElement) 
<ol> (HTMLOListElement) 

<ul> (HTMLUListElement) 

<1i> (HTMLLIElement) 

<dl> (HTMLDListElement) 


<dt> (HTMLElement) 


<dd> (HTMLElement) 


<div> (HTMLDivElement) 


0 文字 层级 元 素 


<a> (HTMLAnchorEJLement ) 
<em> (HTMLElement) 
<strong> (HTMLEJement ) 
<small> (HTMLElement) 
<i> (HTMLElement) 

<b> (HTMLElement) 

<span> (HTMLSpanElement) 
<br> (HTMLBREl]ement) 


o 编 修 记录 元 素 


<ins> (HTMLModEJement ) 


<del> (HTMLModEJement ) 


o 内 馈 媒 体 元 素 


<img> (HTMLImageElement) 
<iframe> (HTMLIFrameElement) 
<embed> (HTMLEmbedElement) 
<object> (HTMLObjectElement) 
<param> (HTMLParamElement) 
<video> (HTMLVideoElement) 


<audio> (HTMLAudioElement) 


<source> (HTMLSourceElement) 


<canvas> (HTMLCanvasElement) 


o 表格 元 素 


<table> (HTMLTableElement) 
<caption> (HTMLTableCaptionElement) 
<tbody> (HTMLTableSectionElement) 
<thead> (HTMLTableSectionElement) 
<tfoot> (HTMLTableSectionElement) 
<tr> (HTMLTableRowElement) 

<td> (HTMLTableDataCellElement) 


<th> (HTMLTableHeaderCellElement) 


o 窗 体 元 素 


<form> (HTMLFormElement) 
<fieldset> (HTMLFieldSetElement) 
<legend> (HTMLLegendElement) 
<label> (HTMLLabelElement) 
<input> (HTMLINputElement) 
<button> (HTMLButtonElement) 
<select> (HTMLSelectElement) 
<datalist> (HTMLDataListElement) 
<option> (HTMLOptionElement) 


<textarea> (HTMLTextAreaElement) 


o ”交互 式 元 素 


<details> (HTMLDetailsElement) 
<summary> (HTMLElement) 
<command> (HTMLCommandElement) 


<menu> (HTMLMenuElement) 


引擎 通过 解析 HIML 文 本 形成 了 对 象 化 的 DOM 树 ， 但 要 将 
DOM 树 演 染 到 浏览 器 窗口 中 形成 有 样式 的 内 容 ， 仍 需要 结合 CSS 规 则 
生成 一 个 带 有 节点 CSS 样 式 描述 的 DOM 树 。 


DOM 元 素 标签 和 DOM 元 素 对 象 虽 然 都 是 用 来 描述 DOM 结 构 
的 ， 但 DOM 元 素 标签 是 指 文本 化 的 HTML 标 识 ， 而 DOM 元 素 对 象 则 
中 经 过 泻 染 引擎 DOM 解 析 后 生成 的 具有 节点 父子 关系 的 树 形 对 


是 


象 。 


CSS 解 析 


CSS 解 析 和 HTML 解 析 类 似 ， 首 先 也 要 通过 词法 解析 生成 CSS 分 析 
树 ， 而 且 也 使 用 特定 的 CSS 文 本 语法 来 实现 ， 不 同 的 是 ，HTML 是 使 用 
类 似 XML 结 构 的 语法 解析 方式 来 完成 分 析 的 。 以 下 面 的 解析 CSS 代 码 
为 例 。 


html, bodyt{ 
margin: 0; 


color: red; 


header, section, footer, div, pt{ 


margin-top: 10px; 


通过 分 析 CSS 文 档 ， 会 生成 如 图 1-10 所 示 的 CSS 规 则 树 状 图 ， 
CSSRule 会 保持 每 个 不 同 元 素 和 对 应 样式 的 映射 关系 。 在 泻 染 树 逐 行 生 
成 的 阶段 ，DOM 树 中 的 节点 会 在 CSS 分 析 树 中 根据 元 素 、 类 、id 选 择 
器 来 提取 与 之 对 应 元 素 的 一 条 或 多 条 CSSRule， 进 行 CSS 规 则 的 层 琶 和 
权重 计算 ， 得 到 最 终生 效 的 样式 CSSRule 并 添加 到 DOM 泻 染 树 上 ， 当 
每 个 DOM 节 点 提取 CSS 样 式 完 成 时 ， 用 于 页 面 布 局 和 绘制 的 DOM 泻 染 
树 便 形 成 了 。 在 一 个 已 经 形成 的 DOM 泻 染 树 中 ， 节 点 的 CSS 规 则 可 通 
过 document.defaultView.getComputedStyle (element, null) 方 法 来 获取 查 
看 。 图 1-11 所 示 为 上 面 文档 中 <header> 元 素 标签 通过 浏览 器 泻 染 后 ， 最 
终 计算 得 到 的 margin 值 内 容 。 


margin: 0; 
color: red; 

} 

header, section, footer, div, p{ 
margin-top: 10px; 


} 


CSSStyleSheet 


CSSRule CSSRule 


Selectors Declaration Selectors Declaration 


header、section、 


html、bod 
a Boy footer、 div、 p 


margin: 3px color:red 


margin-top: 10px 


图 1-10 ”CSS 结构 解析 示意 图 


justifyContent: “normal” 

left: “auUtO” 

length: 258 

letterSpacing: “normal” 
lightingColor: "rgb(255, 255, 255)" 
lineHeight: "normal” 
listStyle: "disc outside none” 
listSstylelmage: "none" 
listStylePosition: “outside” 
listSstyleType: "disc" 

margin: “16px @px 8@px" 
marginBottom: "8px" 
marginLeft: "Opx" 

marginRight: "“@px" 


marginTop: "lpx" 


marker: "" 
markerEnd: "none" 
markerMid: “none” 
markerSstart:; “mone” 
mask: "none" 


maskType: "luminance" 


maxHeight: "none" 
maxWidth: “none” 
maxzZoom: "" 
minHeight: "8@px" 
minWidth: “B@px” 


图 1-11 解析 完成 最 终 样式 


一 个 节点 上 多 条 不 同 的 样式 规则 是 通过 权重 的 方式 来 计算 的 。 
关于 CSS 规 则 的 权重 计算 ， 一 般 认 为 是 ! important> 内 联 样式 规则 
(权重 1000) > id 选择 器 (权重 100) > 类 选择 器 (权重 10) > 元 素 选 
择 器 (权重 1) 。 在 泻 染 树 生 成 阶段 ， 当 多 个 CSSRule 对 应 到 同一 个 
元 素 节 点 中 时 ， 这 种 权重 计算 方式 的 作用 就 体现 出 来 了 ， 一 般 只 有 
权重 最 高 的 样式 规则 才 会 生效 。 


参 考 资 料 


http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/o 


1.2.3 ”浏览 器 数据 持久 化 存储 技术 


这 里 所 说 的 数据 持久 化 存储 主要 是 针对 浏览 器 的 ， 所 以 我 们 统称 
为 浏览 器 缓存 (Browser Caching) ， 浏 览 器 缓存 是 浏览 器 端 用 于 在 本 
地 保存 数据 并 进行 快速 读 取 以 避免 重复 资源 请 求 的 传输 机 制 的 统称 。 
有 效 的 绥 存 可 以 避 锡 重复 的 网 络 资源 请 求 并 让 浏览 快速 地 响应 用 户 
操作 ， 提 高 页 面 内 容 的 加 载 速度 。 浏 览 器 端 缓存 的 实现 机 制 种 类 较 
多 ,一 般 可 以 分 为 九 种 ， 如 图 1-12 所 示 。 打 开 Chrome 浏 览 器 的 调试 模 
式 ，Application 左 侧 就 列举 了 现代 浏览 器 的 8 种 缓存 机 制 : HTTP 文 件 缓 
存 、 LocalStorage、 SessionStorage 、 indexDB 、 Web SQL 、 Cookie、 
CacheStorage、 Application Cache， 另 外 还 有 一 种 使 用 不 太 多 的 Flash 缓 
存 方式 。 下 面 逐 个 介绍 这 9 种 缓存 机 制 的 原理 和 使 用 场景 。 


[Rx 0] | Elements Console Sources Network Timeline Profiles Application Security Audits 


图 1-12 ”浏览 器 缓存 管理 界面 


HTTP 文 件 缓存 


HTTP 文 件 缓存 是 基于 HTTP 协议 的 浏览 器 端 文 件 级 缓存 机 制 。 在 
文件 重复 请 求 的 情况 下 ， 浏 览 器 可 以 根据 HITP 响 应 的 协议 头 信息 判断 
是 从 服务 器 端 请 求 文件 还 是 从 本 地 读 取 文件 ，Chrome 控 制 台 下 的 
Frames 就 可 以 查看 浏览 器 的 HTTP 文 件 资源 缓存 列表 内 容 。 


图 1-13 是 浏览 器 HTTP 文 件 缓存 判断 机 制 的 流程 图 。 针 对 浏览 器 的 
重复 HTTP 请 求 ， 浏 览 器 和 服务 器 判断 是 否 使 用 浏览 器 端 文件 缓存 的 过 
程 如 下 。 


训 宽 知 博 冰 


有 缓存 


是 是 带 If-None-Match 
向 Web 服 务 器 请 求 
i 


判断 是 否 有 握 _ | 带 If-Modified-Since 
Last-Modified 向 Web 服 务 器 请 求 


服务 器 决策 


间断 是 200 还 是 30 少 


向 Web 服 务 器 请 求 


304 无 更 新 


200 有 更 新 


请 求 响应 


图 1-13 ” HTTP 文件 缓存 判断 机 制 流 程 


1. 浏览 器 会 先 查询 Cache-Control (这 里 用 Expires 判 断 也 是 可 以 
的 ， 但 是 Expires 一 般 设置 的 是 绝对 过 期 时 间 ，Cache-Control 设 置 的 是 


相对 过 期 时 间 ) 来 判断 内 容 是 否 过 期 ， 如 果 未 过 期 ， 则 直接 读 取 浏 览 
器 端 缓存 文件 ， 不 发 送 HITP 请 求 ， 否 则 进入 下 一 步 。 


2. 在 浏览 器 端 判 断 上 次 文件 返回 头 中 是 否 含 有 Etag 信 息 ， 有 则 连 
同 If-None-Match 一 起 向 服务 器 发 送 请 求 ， 服 务 端 判断 Etag 未 修改 则 返回 
状态 304， 修 改 则 返回 200， 否 则 进入 下 一 步 。 


3. 在 浏览 器 端 判 断 上 次 文件 返回 头 中 是 否 含 有 Last-Modified 信 
息 ， 有 则 连同 I-Modified-Since 一 起 向 服务 器 发 送 请 求 ， 服 务 端 判断 
Last-Modified 是 否 失效 ， 失 效 则 返回 200， 未 失效 则 返回 304。 


4. 如 果 Etag 和 Last-Modified 都 不 存在 ， 直 接 向 服务 器 请 求 内 容 。 


HTTP 缓 存 可 以 在 文件 缓存 生效 的 情况 下 让 浏览 器 从 本 地 读 取 文 
件 ， 不 仅 加 快 了 页 面 资源 加 载 ， 同 时 节省 网 络 流量 ， 所 以 在 Web 站 点 配 
置 中 要 尽 可 能 利用 缓存 来 优化 请 求 过 程 。 在 HTML 中， 我 们 可 以 添加 
<meta> 中 的 Expires 或 Cache-Control 来 设置 ， 需 要 注意 的 是 ， 一 般 这 里 
Cache-Control 设 置 max-age 的 时 间 单 位 是 秒 ， 如 果 同 时 设置 了 Expires 和 
Cache-Control， 则 只 有 Cache-Control 的 设置 生效 。 


<meta http-equiv="Expires" content="Mon, 20 Jul 2016 23:00:00 
GMT" /> 


<meta http-equiv="Cache-Control" content="max-age=7200" /> 


当然 服务 端 也 需要 进行 对 应 设置 ，Node.js 服 务 器 可 以 使 用 中 间 件 
来 这 样 设置 静态 资源 文件 的 缓存 时 间 ， 例 如 我 们 可 以 结合 Koa Web 框 架 
和 koa-static 中 间 件 如 下 设置 实现 。 


const static= require('koa-static'); 


const app = koa(); 


app.use(static ('./pages', { 


maxage: 


})); 


7200 


localStorage 


localStorage 是 HTML5 的 一 种 本 地 缓存 方案 ， 目 前 主要 用 于 浏览 
端 保存 体积 较 大 的 数据 (如 AJAX 返 回 结 果 等 ) ， 需 要 了 解 的 是 ， 
localStorage 在 不 同 浏览 器 中 有 长 度 限 制 且 各 不 相同 。 


// localStorage 核心 API: 


localStorage 
localStorage 
localStorage 
存储 记录 

localStorage 


存储 记录 


.SetIitem(key, value) 
,getItem(key ) 


.removeItem(key) 


.Clear() 


// 设 置 localStorage 存储 记录 
// 获 取 localStorage 存储 记录 
// 删 除 该 域名 下 单条 LocalStorage 


// 删 除 该 域名 下 所 有 localstorage 


如 表 1-1 所 示 ，localStorage 基 本 支持 目前 的 主流 浏览 器 ， 在 Internet 
Explorer 8 以 上 最 大 限制 为 5SMB， 在 Chrome 或 safari 浏览 器 里 面 的 大 小 
限制 约 为 2.6MB。 另 外 localStorage 常 用 的 API 也 较 少 ， 使 用 起 来 极其 方 
便 ， 核 心 方法 只 有 setItem0O、getItem 0、removeItem0O、clear0。 值 得 注 
意 的 是 ， 这 里 的 大 小 限制 指 的 是 单个 域名 下 localStorage 的 大 小 ， 所 以 


localStorage 中 不 适合 存放 过 多 的 数据 ， 如 果 数 据 存放 超过 最 大 限制 可 
能 会 读 取 报错 ， 因 此 在 使 用 之 后 最 好 移 除 不 再 使 用 的 数据 。 


表 1-1 ”localStorage 浏 览 器 支持 与 大 小 限制 


| 
Internet Explorer 8 以 上 |5MB 

Firefox 8 以 上 [5.24MB 

Opera 2MB 

Chrome、 Safari |2.6MB 


此 外 ，localStorage 只 支持 简单 数据 类 型 的 读 取 ， 为 了 方便 
localStorage 读 取 对 象 等 格式 的 内 容 ， 通 常 需要 进行 一 层 安 全 封装 再 引 
入 使 用 。 


let rkey = /^[0-9A-Za-z @-1*$/; 


let store; 


// 转换 对 象 
function init() { 
if (typeof store === 'uUundefined') { 
store = window['localStorage']; 


} 


return true,; 


// 判断 localStorage 的 key 值 是 否 合法 


function isValidKey(key) { 


If (typeof key !== 'string') { 
return false; 


} 
return rkey.test(key); 


exports = { 


// 设置 localStorage 单条 记录 
set (key, value) { 
let success = false; 
if (isValidKey(key) && init()) { 
try { 
Value += ''， 
store.setIitem(key, value); 
success = true; 
} catch (e) {} 
} 


return success,; 


}, 


// 读 取 localStorage 单条 记录 
get (key) { 
if (isvalidkey(key) && init()) { 


try { 


return store.getIitem(key); 


} catch (e) 全 
} 


return null; 


}, 


// 移 除 localStorage 单条 记录 
remove (key) { 
if (isValidKey(key) && init()) { 
try { 
store.removeItem(key); 
return true; 
} catch (e) 人} 
} 


return false; 


}, 


// 清除 localStorage 所 有 记录 


clear () { 
if (init()) { 
try { 


for (let key in store) { 
store.removeItem(Kkey ) ; 
} 
return true; 
} catch (e) 全 
} 


return false; 


module.exports = exports; 


尽管 单个 域名 下 localStorage 的 大 小 是 有 限制 的 ， 但 是 可 以 用 
iframe 的 方式 使 用 多 个 域名 来 突破 单个 页 面 下 localStorage 存 储 数据 的 
最 大 限制 。 另 外 使 用 浏览 器 多 个 标签 页 打开 同 个 域名 页 面 时 ， 
localStorage 内 容 一 般 是 共享 的 。 


sessionStorage 


sessionStorage 和 1localStorage 的 功能 类 似 ， 但 是 sessionStorage 在 浏览 
器 关闭 时 会 自动 清空 。sessionStorage 的 API 和 1localStorage 完 全 相同 。 由 
于 不 能 进行 客户 端的 持久 化 数据 存储 ， 实 际 项 目 中 sessionStorage 的 使 
用 场景 相对 较 少 。 


Cookie 


Cookie (或 Cookies) ， 指 网 站 为 了 辨别 用 户 身 份 或 Session 跟 踪 而 
储存 在 用 户 浏览 器 端的 数据 。Cookie 信 息 一 般 会 通过 HTTP 请 求 发 送 到 
服务 器 端 。 一 条 Cookie 记 录 主 要 由 键 、 值 、 域 、 过 期 时 间 和 大 小 组 
成 ， 一 般 用 于 保存 用 户 的 网 站 认证 信息 。 浏 览 器 中 Cookie 的 最 大 长 度 
和 单个 域名 支持 的 Cookie 个 数 由 浏览 器 的 不 同 来 决定 。 如 表 1-2 所 示 ， 


在 Internet Explorer 7 以 上 版 本 、Firefox 等 浏览 器 中 ， 支 持 的 Cookie 记 录 
最 多 是 50 条 ，Chrome、Safari 浏 览 器 上 则 没有 限制 ，Opera 浏 览 器 上 最 
多 支持 30 条 ， 而 且 我 们 通常 认为 Cookie 的 最 大 长 度 限制 为 4KB (4095 字 
节 到 4097 字 节 ) 。 


表 1-2 ”Cookie 浏览 器 支持 与 大 小 


本 时 
Internet Explorer 7 以 上 50 个 4095B 
Firefox 50 个 4097B 
Opera 30 个 4096B 
Chrome、 Safari 无 限制 4097B 


和 1localStorage 类 似 ， 不 同 域名 之 间 的 Cookie 信 息 也 是 独立 的 ， 如 
果 需 要 设置 共享 ， 则 可 以 在 被 共享 域名 的 服务 器 端 设置 Cookie 的 path 和 
domain 来 实现 ， 例 如 Koa Web 框 架 下 就 可 以 用 如 下 方法 来 设置 cookie 在 
相同 父 域 的 多 个 子 域 中 共享 ， 其 他 的 web 后 端 框架 也 有 类 似 的 设置 方 
法 6 


this.cookies.set('username', 'ouven', { 
domain: '.domain.com', 
path: '/' 

}); 


浏览 器 端 也 可 以 通过 document.cookie 来 获取 Cookie， 并 通过 
JavaScript 来 处 理解 析 。 但 是 需要 注意 的 是 ，Cookie 分 为 两 种 : Session 
Cookie 和 持久 型 Cookie.Session Cookie 一 般 不 设置 过 期 时 间 ， 表 示 该 


Cookie 的 生命 周期 为 浏览 器 会 话 期 间 ， 只 要 关闭 浏览 器 窗口 ， ER 
会 消失 ， 而 且 Session Cookie 一 般 不 保存 在 硬盘 上 而 是 保存 在 内 存 里 
持久 型 Cookie 一 般 会 设置 过 期 时 间 ， 而 且 浏 览 器 会 将 持久 型 Cookie 的 信 
息 保存 到 硬盘 上 上， 关闭 后 再 次 打开 浏览 器 ， 这 些 Cookie 依 然 有 效 ， 直 
到 超过 设 定 的 过 期 时 间或 被 清空 才 失 效 。Cookie 设 置 中 有 个 HttpOnly 参 
数 ， 前 端 浏 览 器 使 用 document.cookie 是 读 取 不 到 HttpOnly 类 型 Cookie 
的 ， 被 设置 为 HttpOnly 的 Cookie 记 录 只 能 通过 HTTP 请 求 头发 送 到 服务 
器 端 进行 读 写 操作 ， 这 样 就 避免 了 服务 器 端的 Cookie 记 录 被 前 端 
JavaScript 修 改 ， 保 证 了 服务 端 验证 Cookie 的 安全 性 。 


JavaScript 在 浏览 器 端 可 以 通过 document.cookie 来 读 取 非 HttpOnly 类 
型 的 Cookie 记 录 ，document.cookie 的 内 容 通常 是 下 面 这 种 用 等 号 和 分 号 
分 割 的 键 值 对 形式 的 字符 串 。 


"Hm_lvt_6225b4f9f1912feb003dd0be6d643a73=1472800594,1473130193;H 
m_lpvt_6225b4f9f1912f 
eb003ddobe6d643a73=1473130201" 


在 前 端 浏览 器 中 ， 0 cookie 进 行 修改 就 比较 矿 烦 
了 ， 不 过 我 们 同样 可 以 进行 统一 的 封装 来 达到 方便 读 取 和 操作 Cookie 
的 目的 。 


exports = { 


// 获取 单条 cookie 记录 
get (n)t{ 


let m = document.cookie.match(new RegExp( "(人 ^| )"+nN+"= 


([A^A7] ) (21$$)”)) 7 
return Im ?2 "" :decodeURIComponent(m[2]); 


}, 


// 设置 单条 cookie 记录 
set (name, value, domain, path, hour)t{ 
let expire = new Date(); 
expire.setTime(expire.getTime() + (hour?3600000 * 
hour :30*24*60*60*1000)); 
document.cookie = name + "=" + Value + "; " + "expires=" 
+ expire.toGMTString()+"; 
path="+ (path ? path :"/")+ "; " + (domain ? ("domain=" + 
domain + ™;") :1: ""); 


}, 


// 删除 单条 cookie 记录 
del (name, domain, path) { 
document.cookie = name + "=; expires=Mon, 26 Jul 1997 
05:00:00 GMT; path="+ (path ? 
path :"/")+ "; " + (domain ? ("domain=" + domain + ™;") : ""); 


}, 


// 清除 document .cookie 
clear (){ 
let rs = document.cookie.match(new RegExp("([^ ;][^;]*) 
(?=(=[ 和 ;]™*)(;1$))", "gi")); 
// 删除 所 有 cookie 


for (let i in rs)t 
document .cookie = rs[i] + "=;expires=Mon, 26 Jul 
1997 05:00:00 GMT; path=/; " ， 
} 


module.exports = exports; 


存储 型 Cookie 是 存储 在 浏览 器 客户 端 计算 机 硬盘 上 的 。 以 
Windows 系 统 的 Chrome 浏 览 器 为 例 ， 浏 览 器 域名 的 Cookie 文 件 存 储 
在 documents and settings\userName\cookie\ 文 件 夹 下 的 txt 文 本 文件 
里 ， 通 常 文本 内 容 格式 为 通过 一 定 规则 加 密 的 Cookie 内 容 ， 我 们 打 
开 文 件 就 可 以 直接 查看 。 


WebSQL 


WebSQL 是 浏览 器 端 用 于 存储 较 大 量 数据 的 缓存 机 制 ， 不 过 这 只 有 
较 新 版 本 的 Chrome 浏 览 器 支持 该 机 制 ， 并 以 一 个 独立 浏览 器 端 数据 存 
储 规范 的 形式 出 现 。WebSQL 主 要 有 以 下 几 个 特点 。 


1. WebSQL 数 据 库 API 实 际 上 不 是 HTML5 规 范 的 组 成 部 分 ， 目 前 


只 是 一 种 特定 的 浏览 器 特性 ， 而 且 WebSQL 在 HTML5 之 前 就 已 经 存 
全 是 单独 的 规范 。 


2. WebSQL 将 数据 以 数据 库 二 维 表 的 形式 存储 在 客户 端 ， 可 以 根 
据 需 要 使 用 JavaScript 去 读 取 。 


3. WebSQL 与 其 他 存储 方式 的 区 别 : localStorage 和 Cookie 以 键 值 
对 的 形式 存在 ，WebSQL 为 了 更 便于 检索 ， 人 允许 SQL 语 句 的 查询 。 


4. WebSQL 可 以 让 浏览 器 实现 小 型 数据 库存 储 功 能 ， 而 且 使 用 的 
数据 库 是 集成 在 浏览 器 里 面 的 。 


WebSQL API 主 要 包含 三 个 核心 方法 : openDatabase()、transaction() 
和 executeSql()。 例 如 在 mydatabase 数 据 库 中 创建 表 t1， 并 插入 两 条 记 
录 ， 实 现 如 下 。 


// openDatabase( ) 方 法 可 以 打开 已 经 存在 的 数据 库 ， 不 存在 则 创建 
let db = openDatabase('mydatabase', '1.0', 'test table', 2 * 
1024 * 1024); 
let name = [2, 'ouven']; 
db.transaction(function (table) { 

table.executeSql('CREATE TABLE IF NOT EXISTS tl (id unique, 
msg) ) / 

table.executeSql('INSERT INTO tl (id, msg) VALUES (1, 

"hello")'); 

table.executeSql('INSERT INTO tl (id, msg) VALUES (?, ?)', 
name ) ， 


}); 


transaction(); // transaction() 这 个 方法 允许 我 们 根据 情况 控制 执行 事务 提 


交 或 回 滚 


executeSql();  // executeSql( ) 用 于 执行 真实 的 SQL 查询 语句 


openDatabase() 方 法 可 以 打开 已 存在 的 数据 库 ， 并 默认 创建 不 存在 
的 数据 库 。openDatabase() 中 的 五 个 参数 分 别 为 数据 库 名 、 版 本 号 、 描 
述 、 数 据 库 大 小 、 创 建 回 调 ， 即 使 创建 回调 为 null 也 可 以 创建 数据 库 ， 
transaction(0) 方 法 允许 我 们 根据 情况 控制 执行 事务 提交 或 回 滚 ， 
executeSql0) 则 用 于 执行 真实 的 SQL 查询 语句 。 


如 果 需 要 进行 读 操 作 ， 而 且 是 读 取 已 经 存在 的 记录 ， 我 们 也 可 以 
使 用 一 个 回调 阅 数 来 处 理 查 询 的 结果 ， 实 现 如 下 。 


let db = openDatabase('mydatabase '， '2.0", 'test table', 
2*1024); 
db.transaction(function (table) { 
table.executeSql('SELECT * FROM t1', [], function (table, 

results) { 

let len = results.rows.length, i; 

for (i = 0; i < len; i++){ 

console.log(results.rows.item(i).msg); 
} 
}, Null); 

}); 


由 于 兼容 性 问题 ， 加 上 使 用 场景 比较 有 限 ， 目 前 WebSQL 的 应 用 并 
不 是 很 广泛 ， 但 是 作为 浏览 器 缓存 技术 的 一 种 方式 ， 我 们 有 必要 了 解 
它 的 特点 和 实现 方法 。 


IndexDB 


IndexDB 也 是 一 个 可 在 客户 端 存储 大 量 结构 化 数据 并 且 能 在 这 些 数 
据 上 使 用 索引 进行 高 性 能 检索 的 一 套 API。 由 于 WebSQL 不 是 HTML5 规 
范 ， 不 支持 Internet Explorer 10、 Chrome 12 及 Firefox 5 以 上 版 本 的 浏览 
器 ， 所 以 一 般 推荐 使 用 IndexDB 来 进行 大 量 数 据 的 存储 ， 其 基本 实现 和 
WebSQL 类 似 ， 只 是 使 用 的 API 规 范 不 一 样 ，WebSQL 使 用 类 似 NoSQL 
(Not Only SQL， 非 关系 型 数据 库 ) 数据 库 的 设计 实现 ， 读 取 效 率 更 
高 。 浏 览 器 对 IndexDB 的 大 小 限制 通常 约 为 50OMB ， 这 样 就 可 以 将 大 量 
的 应 用 数据 保存 到 本 地 ， 在 本 地 满足 需要 搜索 的 场景 。 


if (database) { 
database.transaction(function(tx) { 
tx.executeSql("CREATE TABLE IF NOT EXISTS test (Id REAL 
UNIQUE, text TEXT)", []); 
}); 


和 WebSQL 类 似 ， 目 前 使 用 IndexDB 的 实际 应 用 场景 也 不 是 很 多 ， 
而 且 将 大 量 数据 保存 到 本 地 也 会 造成 数据 泄露 ， 所 以 我 们 了 解 即 可 ， 
无 须 在 实际 项 目 中 使 用 。 


Application Cache 


Application Cache 是 一 种 允许 浏览 器 通过 manifest 配 置 文件 在 本 地 
有 选择 性 地 存储 JavaScript、CSS、 图 片 等 静态 资源 的 文件 级 缓存 机 


制 。 当 页 面 不 是 首次 打开 时 ， 通 过 一 个 特定 的 manifest 文 件 配置 描述 来 
选择 读 取 本 地 Application Cache 里 面 的 文件 。 所 以 使 用 Application 
Cache 来 实现 浏览 器 应 用 具有 以 下 三 个 优势 。 


1. 离线 浏览 。 通 过 manifest 配 置 描 述 来 读 取 本 地 文件 ， 用 户 可 在 
离线 时 浏览 完整 的 页 面 内 容 。 


. 快速 加 载 。 由 于 缓存 资源 为 本 地 资源 ， 因 此 页 面 加 载 速度 较 
ee. 


3. 服务 器 负载 小 。 只 有 在 文件 资源 更 新 时 ， 浏 览 器 才 会 从 服务 器 
端 下 载 ， 这 样 就 减 小 了 服务 器 资源 请 求 的 压力 。 


图 1-14 为 Application Cache 访 问 页 面 资 源 和 更 新 缓存 的 具体 流程 。 
Application a i 页 面 打 开 时 优先 从 
Application Cache 中 访问 资源 ， 读 取 资 源 加 载 后 同时 会 去 请 求 检 查 服务 
端的 manifest 文 件 是否 已 更 新 ， NS 则 整个 访问 过 程 结 束 ; 
否则 浏览 器 会 去 检查 manifest 列 表 ， 将 更 新 的 内 容重 新 拉 取 到 
Application Cache 中 ， 这 样 页 面 第 三 次 被 访问 时 就 可 以 加 载 到 更 新 后 的 
内 容 了 。 所 以 前 端 页 面 开 发 完成 后 更 新 的 内 容 将 在 用 户 再 一 次 访问 时 
才 会 生效 ， 而 不 是 马上 就 能 生效 。 通 常 ， 一 个 基本 的 Application Cache 
离线 页 面 应 用 至 少 应 该 包括 HTML 页 面 的 manifest 配 置 引 用 与 被 引用 的 
manifest 文 件 。 


访问 AppCache 


检查 manifest 文 件 是 否 已 更 新 


| 


将 manifest 更 新 的 文件 重新 
拉 取 并 更 新 AppCache 从 AppCache 中 读 取 


1-14 Application Cache 文 件 访问 与 更 新 机 制 


<!-- index.html --> 
<html] manifest="app.manifest"> 
<head> 
<title>AppCache Test</title> 
<link rel="stylesheet" href="main-abs931lpd.css"> 
<script src="main-9id3d1lsj.js"></script> 
</head> 
<body> 
<div id="main"></div> 
</body> 
</html> 


对 应 的 manifest 描 述 文 件 如 下 : 


CACHE MANIFEST 
#VERSION 1.0 
CACHE : 
main-abs931lpd.css 


main-9id3d1lsj.js 


假设 这 里 main-9id3dlsj.js 和 main-abs93lpd.css 为 外 部 引用 的 文件 ， 
HTML 下 载 时 会 根据 manifest 内 容 去 加 载 Application Cache 中 CACHE 列 
表 下 的 文件 ， 如 果 服 务 器 更 新 ，CACHE 列 表 下 的 内 容 通常 会 发 生变 化 
并 重新 指向 新 的 资源 列表 ， 浏 览 器 根据 此 来 进行 Application Cache 更 
新 。 另 外 需要 注意 的 是 ， 在 更 新 缓存 时 ， 我 们 也 可 以 通过 


window.applicationCache 对 象 来 访问 浏览 器 的 Application cache， 并 可 以 
查看 对 象 的 status 属 性 来 获取 cache 对 象 的 当前 状态 。 


let appCache = window.applicationCache; 
Switch (appCache.status) { 

case appCache ,UNCACHED: // UNCACHED == 0， 表 示 未 缓存 
return 'UNCACHED ' ， 
break; 

case appCache.,IDLE: // IDLE == 1， 表 示 闲 置 
return 'IDLE'; 
break; 

case appCache .CHECKING: // CHECKING == 2， 表 示 检 查 中 
return "CHECKING ' ， 
break; 

case appCache ,DOWNLOADING: // DOWNLOADING == 3， 表 示 下 载 中 
return 'DOWNLOADING'; 
break; 

case appCache.UPDATEREADY: // UPDATEREADY == 4， 表 示 已 更 新 
return 'UPDATEREADY'; 
break; 

case appCache.0BSOLETE: // 0BSOLETE == 5， 表 示 已 失效 
return "OBSOLETE ' ， 
break; 

default: 


return 'UKNOWN CACHE STATUS ' ; 


break; 


}; 


applicationCache 对 象 也 可 以 主动 更 新 Cache 内 容 ， 不 需要 等 到 下 一 
次 更 新 。 例 如 调用 applicationCache.update() 方 法 ， 这 样 浏览 器 可 以 去 主 
动 尝试 更 新 用 户 的 Cache (在 manifest 文 件 已 经 改变 的 情况 下 ) 。 最 
后 ， 当 applicationCache.status 处 于 UPDATEREADY 状态 时 ， 调 用 
applicationCache.swapCache() 方 法 ， 旧 的 Cache 内 容 就 会 被 置换 成 新 
的 。 


let appCache = window.applicationCache; 

appCache.update(); // 尝试 更 新 用 户 的 Application Cache 

// TODO... 

if (appCache.status == window.applicationCache.UPDATEREADY) { 
appCache.swapCache(); // 置换 新 的 Application Cache 内 容 


尽管 Application Cache 的 实现 很 方便 ， 但 是 仍然 需要 注意 以 下 几 个 


问题 。 


1 .Application Cache 已 经 开始 被 标准 弃 用 ， 渐 渐 将 会 由 
ServiceWorkers 来 代替 ， 所 以 现在 不 建议 使 用 Application Cache 来 实现 离 
线 应 用 ， 仅 作为 一 种 技术 了 解 即 可 。 


2. Application Cache 仍 不 能 兼容 目前 全 部 主流 的 浏览 器 环境 ， 即 
使 是 在 移动 端 。 


3. Application Cache 为 站 点 离线 存储 提供 的 容量 限制 是 5MB， 现 
在 来 说 显然 不 适用 。 


4. 如 果 manifest 文 件 或 者 内 部 列表 中 的 某 一 个 文件 不 能 正常 下 
载 ， 整 个 更 新 过 程 将 视 为 失败 ， 浏 览 器 将 继续 使 用 旧 的 缓存 。 


5. 引用 manifest 的 HTML、 缓 存 列 表 的 静态 资源 必须 与 manifest 文 
件 同 产 ， 即 保持 在 同一 个 域 下 。 


6. 站 点 中 的 其 他 页 面 即使 没有 设置 manifest 属 性 ， 请 求 的 资源 也 
会 从 缓存 中 访问 。 


7. 当 manifest 文 件 发 生 改 变 时 ， 资 源 请 求 本 身 也 会 触发 更 新 。 


总 之 ，Application Cache 仍 是 一 个 不 成 熟 的 本 地 缓存 解决 方案 ， 实 
际 项 目 中 也 并 不 推荐 使 用 ， 但 其 设计 思路 为 我 们 后 面 实现 离线 访问 机 
制 提供 了 方向 。 


cacheStorage 


cacheStorage 是 在 ServiceWorker 规 范 中 定义 的 ， 可 用 于 保存 每 个 
ServiceWorker 声 明 的 Cache 对 象 ， 是 未 来 可 能 用 来 代替 Application 
Cache 的 离线 方案 。cacheStorage 有 open()、match()、has ()、delete()、 
keys 0 五 个 核心 API 方 法 ， 可 以 对 Cache 对 象 的 不 同 匹 配 内 容 进 行 不 同 的 
响应 ，cacheStorage 在 浏览 器 端 为 window 下 的 全 局 内 置 对 象 caches， 那 
么 我 们 就 可 以 直接 通过 下 面 的 形式 来 使 用 了 。 


caches ,has()， // 检查 如 果 包 含 Cache 对 象 ， 则 返回 一 个 promise 


对 象 


caches ,open() // 打开 一 个 Cache 对 象 ， 并 返回 一 个 promise 对 象 
caches ,delete()， // 删除 Cache 对象， 成 功 则 返回 一 个 promise 对 
象 ， 否 则 返回 false 

caches ,keys(); // 含有 keys 中 字符 串 的 任意 一 个 ， 则 返回 一 个 
promise 对 象 

caches .match( ); // 匹配 key 中 含有 该 字符 串 的 cache 对 象 ， 返 回 一 


个 promise 对 象 


要 了 解 cacheStorage ， 我 们 必须 深入 了 解 一 下 ServiceWorker ， 
ServiceWorker 与 WebWorker 一 样 是 在 浏览 器 后 台 作 为 一 个 独立 的 线程 运 
行 的 JavaScript 脚 本 ， 可 以 为 浏览 器 提供 并 行 的 计算 和 数据 处 理 能 力 ， 
并 通过 message/postMessage 方 法 在 页 面 之 间 进 行 通信 ， 但 是 不 能 与 前 端 
界面 进行 交互 。 我 们 知道 Native APP (一 般 指 移动 客户 端的 原生 应 用 ) 
可 以 做 到 消息 推送 、 离 线 使 用 、 自 动 更 新 等 ， 同 样 地 ， 如 果 使 用 
ServiceWorker 也 可 以 让 Web 应 用 具有 类 似 功 能 。 


图 1-15 为 ServiceWorker 运 行 的 生命 周期 ， 我 们 在 使 用 ServiceWorker 
时 通常 需要 先 注 册 ServiceWorker 的 脚本 文件 ， 然 后 在 其 脚本 中 运行 
caches 的 缓存 控制 方法 ，caches 是 浏览 器 提供 的 用 于 存储 文件 缓存 管理 
的 对 象 ， 也 是 浏览 器 提供 的 cacheStrage 全 局 对 象 。 例 如 我 们 可 以 用 如 下 
方法 在 浏览 器 中 注册 一 个 ServiceWorker。 


Installing 


Activated 


Message 


1-15 ”ServiceWorker 运 行 的 生命 周期 


If (navigator.servicewWorker) { 
Navigator.serviceWorker.register('./service- 
worker .js').then(function(registration) 
{ 
console.1log('service worker 注册 成 功 ' ); 
}).catch(function (err) { 
console.1log('servcie worker 注册 失败 ' ) 


}); 


} 


// service-worker.js 

let cacheList = [ 
'main.js', 
'main.css' 


]; 


// 这 样 就 将 缓存 的 文件 列表 注册 到 CacheStorage 里 面 了 ,浏览 器 端 使 用 caches 
全 局 变量 caches 来 管理 
this.addEventListener('install', function(event) { 
/ 添加 cacheStorage 缓存 
event .waitUntil( 
caches.open('my-page-cache').then(function(cache) { 
return caches.addAll(cacheList); 
}) 
); 
}); 


这 样 就 将 cacheList 中 的 两 个 文件 路 径 注 册 到 cacheStorage 中 了 ， 通 
过 监听 ServiceWorker 的 fetch 方 法 ， 如 果 匹 配 到 这 两 个 文件 对 应 的 URL 
路 径 请 求 ，cacheStorage 就 可 以 返回 特定 的 本 地 缓存 进行 响应 ， 而 不 用 
再 向 服务 端 发 送 请 求 。 而 且 ServiceWorker 脚 本 的 更 新 也 很 简单 ， 版 本 
更 新 后 注册 引用 新 的 文件 就 可 以 了 。 


// 根据 Serveworker 返回 caches 中 的 文件 ， 而 不 发 送 浏 览 器 请 求 
this.addEventListener('fetch', function(event) { 


event.respondwith(caches.match(event.request).then( 


function(response) { 
// 如 果 有 线 上 返回 内 容 ， 则 直接 返回 
if (response) { 
return response 
} 
let responseToCache = response.clone(); 
// 否则 读 取 缓存 里 面 的 响应 返回 
caches.open('my-page-cache').then(function(cache) { 
cache.put(event.request, responseToCache); 
}); 
}); 
})); 
}); 


通过 这 种 方式 实现 离线 缓存 的 优点 是 可 以 利用 浏览 器 的 本 身 机 制 
来 实现 ， 而 不 需要 过 多 服务 端 复杂 的 设计 。 然 而 我 们 也 需要 知道 ， 目 
前 ServiceWorker 的 浏览 器 兼容 性 很 差 ， 导 致 这 种 方案 还 不 成 熟 ， 至 少 
在 短期 内 仍 不 是 一 个 可 行 的 方案 。 


Flash 缓 存 


Flash 绥 存 的 方式 目前 应 用 比较 少 ， 它 主要 基于 网 页 端 Flash， 具 有 
读 写 浏览 器 端 本 地 目录 的 功能 ， 同 时 也 可 以 向 JavaScript 提 供 调 用 的 
API， 这 样 页 面 就 可 以 通过 JavaScript 调 用 Flash 去 读 写 指定 的 磁盘 目 
录 ， 达 到 本 地 数据 缓存 的 目的 。 


关于 浏览 器 缓存 实现 的 技术 和 方式 较 多 ， 尤 其 是 在 较 新 的 浏览 
上 ， 但 我 们 仍 要 明白 目前 可 以 在 项 目 中 配置 应 用 的 只 有 HTTP 缓 存 、 
localStorage 和 Cookie。 ServiceWorker 在 将 来 可 能 会 被 使 用 ,但 目前 兼容 
性 的 欠缺 仍然 不 能 忽视 ， 其 他 的 缓存 方式 我 们 仅 作 为 知识 了 解 即 可 。 


http:/www.html5rocks.com/en/tutorials/webdatabase/websq]- 


indexeddb/。 


http://www.html5rocks.com/en/tutorials/offline/storage/o 


http:/www.html5rocks.com/en/tutorials/service- 


worker/introduction/o 


1.3 ”前 端 高 效 开 发 技术 


前 端 项 目 工程 随 着 网 站 项 目 或 Web App 项 目的 出 现 而 产生 ， 随 着 项 
目 越 来 越 庞 大 ， 前 端 工 程 的 开发 工作 也 越 来 越 复杂 。 对 于 前 端 工 程 师 
来 说 ， 掌 握 和 运用 什么 样 的 前 端 开发 技术 直接 决定 着 前 端 项 目 实 践 中 
的 工程 开发 效率 是 什么 样 的 。 那 么 前 端 开发 技术 具体 指 的 是 什么 呢 ? 
通俗 地 说 ， 前 端 开 发 技术 指 的 是 前 端 开 发 实践 过 程 中 所 用 到 的 一 切 工 


程 方法 和 手段 。 
这 一 节 ， 我 们 就 来 简单 聊 一 聊 与 前 端 开发 技术 相关 的 内 容 。 


1.3.1 前端 高 效 开 发 工具 


在 前 问 实 践 中 ， 任 何 项 目的 开发 仍然 需要 从 最 基本 的 编辑 器 说 
起 。 工 欲 善 其 事 ， 必 先 利 其 器 。 高 效 便捷 的 开发 工具 能 帮助 我 们 提高 
编码 的 效率 ， 避 人 免 不 必要 的 时 间 消 耗 。 就 前 端 而 言 ， 主 流 的 开发 工具 
主要 有 Sublime、Webstorm、Vscode、Vim 等 ， 你 可 能 要 说 这 里 没有 你 
认为 优秀 的 编辑 工具 ， 我 们 先 以 这 四 种 前 端 开 发 工具 为 例 做 一 个 简单 
的 比较 ， 后 续 继续 讨论 其 他 工具 。 


表 1-3 中 简单 列举 了 一 些 主流 的 前 端 开 发 编辑 工具 及 其 优 缺 点 。 


表 1-3 ”前 端 常用 开发 工具 


| 编辑 器 | 优 势 
“| 较 轻 量 级 、 插 件 齐 CE 
扩展 插件 工具 覆盖 非常 全 面 | 能 
集成 较 全 面 的 开发 工具 ， 也 可 以 先 
j 较 重量 
eee 站 


较 轻 量 级 ， 原 生 支 持 TypeScript， 完整 性 箭 
Vscode | 关联 断 点 调试 非常 方便 ， 也 可 扩展 | 站 对 下 时 性 稍 罗 


入 门 相对 难 ， 没 有 较 多 
vim Linux 下 可 选 的 高 效 工 具 前 端 对 应 的 高 效 辅助 插 
件 


无 论 选择 哪 一 种 ， 一 款 高 效 的 开发 工具 都 应 该 具备 以 下 几 个 方面 
的 能 力 。 


o 代码 格式 化 Format 能 力 。 编 辑 器 具有 自动 按照 默认 的 设置 或 人 
为 设 定 的 规范 格式 化 HTML/JavaScript/CSS 等 语法 代码 的 能 
力 ， 避 免 我 们 花费 时 间 去 调整 不 规范 的 格式 。 


o 代码 模板 Snippet 能 力 。 例 如 ， 快 捷 键 + tab 具 有 上 自动 生成 for 循 环 
或 try.….catch 代 码 块 的 能 力 ， 避 免 我 们 手动 输入 重复 代码 或 注 
释 而 花费 大 量 的 时 间 。 


o 自动 检测 错误 能 力 。 例 如 ， 各 种 代码 Lint、Hint 工 具 自 动 提示 
HTML、JavaScript、CSS 不 规范 的 地 方 ， 辅 助 我 们 快速 开发 ， 
不 用 自己 查找 一 些 低 级 的 语法 错误 或 不 规范 的 地 方 。 


o 编辑 快捷 键 能 力 。 这 应 该 是 任何 一 个 高 效 的 工具 都 要 具备 的 能 
力 ， 而 且 快 捷 键 应 该 越 全 越 好 。 


o 自动 Debug 能 力 。 现 在 大 多 浏览 器 能 提供 这 一 功能 ， 每 个 人 也 
可 以 按 需 选择 ， 最 新 的 Chrome 也 支持 ECMAScript 6 以 上 的 调 
试 ， 如 果 编 辑 器 能 具备 这 个 能 力 当 然 再 好 不 过 。 


o ”Git 或 svn 版 本 控制 插件 能 力 。 这 个 功能 开发 者 可 以 根据 需要 自 
行 选择 ， 关 于 Git 或 svn 的 使 用 这 里 不 做 前述 。 


co 自动 文档 工具 。 开 发 的 过 程 中 应 尽量 保留 文档 ， 但 是 我 们 很 可 
能 没有 太 多 时 间 写 文档 ， 因 此 ， 如 果 编 辑 器 插件 能 帮助 我 们 
自动 高 效 生成 代码 文档 注释 就 比较 好 了 。 另 外 要 注意 的 是 ， 
自 文档 化 代码 的 编写 也 是 一 个 很 好 的 习惯 。 


很 多 时 候 编辑 器 其 实 无 法 满足 上 述 所 有 的 功能 ， 那 就 要 根据 我 们 
自己 的 核心 需求 进行 选择 了 。 每 个 人 的 核心 需求 可 能 不 同 ， 选 择 也 不 


同 ， 但 无 论 怎样 ， 好 的 工具 的 核心 特点 是 能 够 帮助 我 们 实现 高 效 开 
发 ， 而 不 是 工具 本 身 具备 的 功能 ， 过 多 地 关注 工具 本 身 就 舍 本 了 逐 末 
了 。 


在 我 们 开始 敲 键盘 之 前 ， 最 好 确认 编辑 工具 是 否 具有 以 上 这 几 点 
高 效 的 特性 。 但 如 果 你 还 没有 使 用 到 这 些 扩展 的 辅助 功能 ， 那 么 请 赶 
紧 去 完善 工具 ， 好 的 开发 工具 不 仅 可 以 提高 我 们 开发 的 速度 ， 也 可 以 
辅助 我 们 写 出 更 高 质量 的 代码 。 


1.3.2 ”前 端 高 效 调 试 工具 
前 端 快速 调试 工具 Chrome 浏 览 器 


通常 前 端 开 发 过 程 中 使 用 最 多 的 调试 工具 大 概 就 是 Chrome 浏 览 器 
了 ， 早 期 使 用 Firefox 浏 览 器 较 多 ， 不 过 现在 使 用 的 人 很 少 ， 只 是 偶尔 
会 考虑 页 面 在 Firefox 浏 览 器 上 的 兼容 性 问题 。 


虽然 Chrome 只 是 一 款 浏览 器 ， 但 是 要 了 解 使 用 Chrome 所 有 的 开发 
调试 技巧 也 是 很 难 的 。 另 外 还 有 一 些 高 效 的 开发 者 工具 插件 ， 如 
Postman、hostAdmin 等 。 图 1-16 为 Chrome 浏 览 器 的 调试 工具 界面 。 
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图 1-16” Chrome 浏览 器 调试 工具 界面 


在 Chrome 浏 览 器 中 ， 用 F12 打 开 控 制 台 后 ， 一 名 优秀 的 前 端 工 程 师 
需要 尽量 保证 自己 对 里 面 95% 以 上 的 操作 和 内 容 都 很 熟悉 ， 这 样 才 可 以 
说 是 基本 运用 自如 。 Chrome 的 调试 面板 主要 包括 设备 模拟 、 
Elements 、 Console 、 Sources 、 Network 、 Timeline 、 Profiles 、 


Resources、Security、Audits 这 些 内 容 。 


o 设备 模拟 不 仅 可 以 让 Chrome 模 拟 移动 端 浏览 器 和 桌面 浏览 器 中 
打开 页 的 全 部 汪 而 且 还 可 以 检 开 移动 ， 山中 常见 的 不 同 机 型 
屏幕 大 小 和 分 辨 率 情 况 下 加 载 页 面 的 显示 结果 ， 或 者 自己 添 
加 特定 模拟 设备 的 屏幕 来 模拟 显示 效果 。 


Elements 则 可 以 用 于 阅读 DOM 结 构 和 DOM 样 式 的 内 容 及 规 
则 ， 或 者 添加 阻塞 DOM 泻 染 的 断 点 功能 来 看 页 面 的 泻 染 细 
1 


Console 的 功能 是 查看 控制 台 输 出 的 内 容 或 者 直接 执行 某 部 分 


JavaScript 脚 本 的 运行 命令 行 。 


通过 Sources 我 们 可 以 浏览 网 站 加 载 的 所 有 静态 目录 资产 ， 同 时 
可 以 进行 资产 内 容 的 查看 阅读 和 脚本 的 断 点 调试 。 


NetWork 常 用 于 查看 页 面 内 容 加 载 的 网 络 请 求情 况 ， 如 请 求 的 
返回 码 、 类 型 、 大 小 、 消 耗 时 间 、 网 页 资源 加 载 时 序 图 等 。 


使 用 Timeline 可 以 查看 浏览 器 执行 性 能 和 内 存 消 耗 的 时 序 图 情 
况 。 


Profiles 是 测试 网 页 性 能 消耗 的 一 种 方式 ， 用 于 统计 例如 CPU 等 
系统 资源 在 页 面 加 载 过 程 中 的 消耗 分 布 情况 。 


Application (旧版 的 Chrome 浏 览 器 中 为 resources) 用 于 查看 
Chrome 浏览 器 缓存 情况 ， 主 要 包括 HTTP 文 件 缓存 、 
Application Cache 、 ServiceWorker 缓 存 对 象 、LocalStorage、 
SessionStorage 、 IndexedDB 、 WebSQL 、 Cookies 、 Cache 
Storage 等 缓存 空间 中 的 情况 。 


Security 用 于 管理 网 站 安全 证 书 ， 例 如 ， 在 HITPS 的 网 站 下 面 
我 们 可 以 通过 它 来 查看 网 站 使 用 的 证 书 内 容 。 


Audits 则 可 以 根据 目前 页 面 文档 加 载 和 脚本 执行 情况 给 出 当前 
前 端 页 面 的 部 分 优化 建议 ， 这 对 于 前 端 页 面 的 优化 具有 极其 


重要 的 借鉴 意义 。 


除了 普通 的 Debug 和 模拟 移动 设备 这 些 功 能 ，Chrome 还 提供 了 移 
动 连接 模拟 真实 设备 的 inspect 查 看 功能 。 例 如 ， 在 Chrome 地 址 栏 中 输 
入 chrome:VWinspect/#devices 即 可 查看 主机 当前 连接 的 移动 设备 浏览 器 打 
开 网 页 的 情况 ， 并 可 以 阅读 DOM 结 构 和 查看 Debug 信 息 。Chrome 还 有 
很 多 有 意思 的 扩展 功能 ， 打 开 chrome://chrome-urls 了 就 可 以 知道 所 有 
Chrome 支 持 的 扩展 功能 信息 ， 包 括 浏览 器 的 各 类 工具 界面 入 口 。 


chrome://version/  // 查 看 系统 信息 
chrome://inspect/  ”// 查 看 连接 设备 调试 信息 
chrome://downloads // 浏 览 器 下 载 管理 
chrome://settings/ // 浏 览 器 设置 


当然 ， 只 会 使 用 Chrome 浏 览 器 调试 是 远 远 不 够 的 ， 使 用 Chrome 吕 J 
以 帮助 我 们 便捷 快速 地 定位 大 部 分 脚本 逻辑 或 页 面 性 能 问题 ， 但 是 如 
果 要 开发 多 浏览 器 下 的 兼容 页 面 ， 还 必须 要 考虑 兼容 Internet Explorer、 
Firefox 或 移动 端 各 种 版 本 真实 环境 的 浏览 器 ， 所 以 这 时 Chrome 通 常 只 
作为 项 目前 期 高 效 开 发 的 调试 工具 ， 开 发 完成 后 仍 需 要 考虑 更 多 不 同 
浏览 器 版 本 的 兼容 性 问题 。 


网 络 辅助 工具 


除了 前 端 调试 工具 ， 我 们 通 单 还 需要 依靠 一 些 辅助 工具 来 协助 开 
发 。 前 端 开发 中 必须 要 提 到 的 一 个 辅助 开发 工具 就 是 Fiddler， 没 有 使 
用 过 的 建议 尝试 下 。 其 基本 原理 是 作为 本 地 的 一 个 代理 服务 ， 将 特定 
的 应 用 层 网 络 请 求 拦截 ， 来 模拟 需要 的 不 同 场景 。 拦 截 处 理 规则 可 以 


由 使 用 者 来 制定 。 其 实 很 像 一 个 本 地 的 Nginx 服 务 器 ， 对 配置 的 域名 或 
地 址 请 求 返回 对 应 的 模拟 响应 内 容 。 除 了 获取 本 机 的 网 络 请 求 ， 
Fiddler 还 可 以 作为 代理 拦截 其 他 连 入 设备 的 请 求 ， 这 样 我 们 在 移动 端 
进行 开发 时 ， 真 实 设备 上 的 请 求 就 可 以 通过 配置 Fiddler 代 理 来 获取 
J 


如 图 1-17 所 示 ， 将 移动 设备 的 网 络 配置 代理 指向 一 台 运 行 Fiddler 的 
开发 计算 机 ， 那 么 移动 设备 发 起 的 HTTP 请 求 都 会 经 过 开发 计算 机 被 
Fiddler 代 理 拦 截 ， 然 后 便 可 以 直接 配置 执行 该 请 求 的 返回 。 例 如 将 
http://www.domain.com/text.html 的 URL 请 求 返 回 开发 计算 机 中 磁盘 的 
text.html 文 件 内 容 ， 或 者 模拟 访问 http:/www.domain.com/index.htm 地 址 
返回 404 的 情况 。 除 此 之 外 ，Fiddler 也 可 以 查看 请 求 资源 内 部 信息 ， 查 
看 资源 加 载 时 序 图 ， 模 拟 在 慢 速 网 络 下 查看 页 面 内 容 输 出 和 调试 的 情 
况 等 。 有 人 基于 Fiddler 做 了 一 个 Willow 的 插件 来 实现 更 强 的 代理 替换 规 
则 ， 例 如 ， 路 径 目 录 蔡 换 、 特 定 DNS 域 名 替换 、HOST 配 置 等 。 总 的 来 
说 ，Fiddler 目 前 已 经 成 为 前 端 开发 中 不 可 或 缺 的 辅助 开发 工具 之 一 。 


| 代理 接 入 访问 一 一 一 互联 网 访问 一 一 一 一 ~ 


互联 网 


移动 设备 
Fiddler 规 则 配置 
http://www. domain. com/text.html C:\\text.html 
http://www. domain. com/index. html 404 


图 1-17 ”Fiddler 设置 代理 工作 流程 


Node 调 试 工具 


人 内 容 
的 一 部 分 ， 后 面 的 章节 会 展开 介绍 ， 所 以 这 里 我 们 先 简单 了 解 一 下 
Node 的 开发 调试 方式 。 


服务 端 开发 调试 的 工具 也 比较 多 。 例 如 node-supervisor、node- 
inspector 及 以 后 可 能 出 现 的 新 工具 。 这 类 工具 入 门 很 简单 ， 按 照 参 考 文 
档 安 装 后 ， 用 它们 特定 的 命令 启动 应 用 入 口 文件 就 可 以 了 。 举 例 来 
说 ，node-inspector 安 装 如 下 。 


$ npm install -g node-inspector 

$ node-debug app.js 

Node Inspector is now available from http://127.0.0.1:8080/? 
ws=127.0.0.1:8080&port=5858 


Debugger listening on port 5858 


这 样 要 调试 的 Nodeg ee 我 们 还 需要 用 
node-inspector 服 务 将 运行 的 代码 同步 到 浏览 行 调 试 ， 因 此 还 需 
打开 另 一 个 终端 。 


$ node-inspector 
Node Inspector vO.11.2 
Visit http://127.0.0.1:8080/?ws=127.0.0.1:8080&port=5858 to 


start debugging. 


这 时 node-inspector 会 启动 一 个 远程 可 访问 的 网 络 端口 服务 ， 开 发 
者 通过 浏览 器 可 以 对 Node.js 的 文件 进行 查看 同时 ee 调试 。 访 问 
http:/127.0.0.1:8080/?ws=127.0.0.1:8080&port=5858 会 进入 如 图 1-18 所 示 
的 一 个 文件 目录 的 调试 界面 ， 然 后 我 们 就 可 以 进行 断 点 调试 了 。 


图 1-18 node-inspector 浏 览 器 端 调试 界面 


如 图 1-19 所 示 ， 之 所 以 能 这 样 做 是 因为 node-inspector 这 类 调试 工具 
可 以 将 Node 服 务 的 JavaScript 代 码 解 析 后 通过 自身 开启 的 端口 发 送 到 浏 
览 器 端 运行 ， 这 样 可 以 将 Node 端 的 JavaScript 的 逻辑 映射 到 浏览 器 中 控 
制 执行 ， 实现 Node 端 执行 代码 和 浏览 器 载 入 代码 同步 调试 功能 。 当 
然 ， 调 试 时 一 般 推荐 使 用 较 新 版 本 的 Chrome 浏 览 


Node Java9cript 


代码 


发 送 到 浏览 器 运行 通过 端口 解析 获取 代码 


Inspector 服务 


图 1-19 ”Inspector 远 程 调试 运行 原理 


除 此 之 外 ，Node 端 开发 也 可 以 同 其 他 服务 端 语言 开发 一 样 使 用 更 
直接 的 方式 ， 例 如 通过 输出 log 日 志文 件 或 信息 来 进行 Node 端 的 开发 调 
试 等 方式 。 


前 端 远 程 调试 工具 


在 前 端 页 面 开 发 中 ， 除 了 一 般 的 开发 调试 方法 ， 也 有 一 些 例 如 
Vorlon.js、 Weinre 等 用 于 移动 端 浏 览 器 的 远程 调试 工具 。 前 端 远程 调试 
工具 的 原理 和 使 用 方式 跟 node-inspect 类 似 ， 也 需要 启动 一 个 调试 代理 
era i ne 
同时 开发 机 模拟 浏览 器 上 的 操作 也 要 回馈 给 远程 设备 。 例 如 ， 使 用 
vorlon 来 进行 远程 调试 就 可 以 通过 以 下 代码 来 实现 。 


$ npm install -g vorlon 

$ vorlon 

2016-12-12 13:6:57 - info: Vorlon.Js PROXY listening on port 
5050 

2016-12-12 13:6:57 - info: Vorlon.js SERVER listening on port 
1337 


此 外 ， 我 们 还 需要 在 页 面 中 引用 一 个 JavaScript 文 件 来 支持 浏览 
端 vorlon 的 调试 服务 。 


<script src="http://localhost:1337/vorlon.js"></script> 


这 样 页 面 上 就 可 以 显示 如 图 1-20 所 示 的 浏览 器 端 远程 调试 的 界面 
了 。 


ExXft ”5 deoprocated, Please use ‘MudioContext™ instead. 
is deprecated, Plesse use 
tornage” on ‘navigator.weobkitPersistentStorage instead. 


' 
ated. Please use ‘URL* instead. 


1-20 ”Vorlon 远 程 调试 运行 界面 


例如 在 开发 机 浏览 器 上 选中 一 个 <div> 元 素 ， 这 时 Vorlon 或 Weinre 
的 Node 端 服务 会 通知 将 远程 设备 上 对 应 的 这 个 元 素 加 上 一 个 高 亮 边框 
来 表示 该 元 素 被 选中 。 相 对 于 node-inspect， 这 里 的 远程 设备 可 能 是 真 
实 的 移动 端 设备 ， 而 不 是 Node.js 环 境 。 


如 图 1-21 所 示 ， 调 试 代理 服务 器 可 以 将 远程 设备 浏览 器 中 的 内 容 加 
载 到 开发 机 上 重新 解析 ， 开 发 机 Am ie 
务 的 特定 端口 同步 到 远程 设备 上 响应 ， 这 样 就 可 以 在 开发 机 浏览 器 
实时 查看 远程 设备 浏览 器 上 显示 的 内 容 了 ， 而 且 开 发 机 模拟 浏览 器 
的 操作 也 可 以 映射 同步 到 远程 设备 上 。 


同步 代码 同步 代码 


Vorlon 等 代理 调试 服务 


图 1-21 前端 远 程 调试 运行 原理 


基于 项 目 实践 经 验 ， 这 种 调试 方式 虽然 看 起 来 比较 高 效 ， 但 使 用 
时 间 题 较 多 ， 而 且 代理 调试 服务 器 由 于 频繁 进行 同步 可 能 会 导致 内 容 
不 稳定 也 是 一 个 问题 。 例 如 ， 有 时 同步 刷新 的 实时 性 不 强 ， 或 者 直接 


没 反 应 。 所 以 大 家 可 以 了 解 这 种 调试 方式 ， 必 要 的 时 候 作 为 备用 方案 
使 用 ， 从 实际 开发 的 角度 上 来 讲 ， 还 是 尽量 先 使 用 Chrome 配 合 Fiddler 
辅助 工具 的 方式 来 高 效 快速 地 定位 大 部 分 问题 。 


除了 上 面 介 绍 的 开发 调试 方法 ， 还 有 一 些 其 他 的 可 选调 试 方案 。 
实际 开发 中 我 们 可 能 并 不 会 都 用 到 ， 具 体 要 根据 实际 场景 和 个 人 习惯 
来 选择 。 更 多 时 候 我 们 遇 到 的 问题 是 可 控 的 ， 大 多 数 问 题 也 不 是 必须 
使 用 某 个 特定 的 调试 方法 才能 重 现 解决 的 ， 所 以 在 开发 过 程 中 还 要 有 灵 


活 选 择 运 用 。 
1.4 ”本 章 小 结 


这 一 章 主要 介绍 了 前 端 技 术 的 发 展 概况 以 及 一 些 必 须 掌握 的 浏览 
器 基础 知识 与 常用 开发 技术 。 总 体 来 说 ， 对 前 端 技术 的 发 展 和 前 景 
一 个 正确 的 认识 是 作为 前 端 工 程 师 最 基本 的 素养 ， 另 外 ， 掌 握 浏 览 
缓存 技术 也 能 帮助 我 们 整体 把 握 持 久 化 存储 的 实现 概貌 ， 有 利于 我 们 
根据 实际 的 应 用 场景 选择 合适 的 缓存 方案 。 作 为 前 端 工程 师 ， 我 们 需 
要 做 的 事情 还 有 很 多 ， 这 也 是 现代 前 端 赋予 我 们 的 机 遇 和 挑战 。 下 一 
章 中 ， 我 们 将 对 前 端 相关 的 协议 进行 分 析 总 结 ， 让 读者 从 基础 概念 和 
实践 中 理解 与 前 端 相关 的 各 类 协议 的 原理 与 实现 。 


第 2 章 “前 问 与 协议 


我 们 知道 ， 浏 览 器 上 解析 执行 的 HTML、CSS 和 JavaScript 文 件 通 
常 是 通过 网 络 请 求 从 web 服务 器 上 下 载 解析 的 ， 加 载 过 程 中 ， 浏 览 
通过 网 络 模块 创建 下 载 进 程 ， 发 起 HTTP 请 求 ， 将 HIML 文 本 、CSS 样 
式 或 JavaScript 脚 本 装载 进 浏览 器 解析 或 运行 。 这 里 就 涉及 了 一 些 相关 
的 网 络 协议 ， 我 们 可 以 认为 与 前 端 关系 最 密切 的 协议 是 HTTP 协议 ， 因 
为 几乎 所 有 的 前 端 相 关 资 源 文件 均 是 通过 HTTP 协 议 请 求 完成 的 。 前 端 
Web 应 用 的 发 展 加 速 了 前 后 端 技术 的 分 离 ， 这 种 开发 模式 降低 了 前 端 
与 服务 端的 耦合 ， 但 是 前 端 和 服务 端 之 间 的 交互 数据 通信 仍 是 通过 协 
议 来 完成 的 ， 这 里 的 协议 可 以 认为 是 前 后 端 开 发 者 之 间 主 观 协商 形成 
的 一 层 数据 接口 规范 。 当 然 ， 还 有 基于 SSL (Secure Sockets Layer， 安 
全 套 接 字 层 ) 层 的 HTTPS 协 议 。 进 入 移动 互联 网 时 代 后 ， 移 动 端 web 
脚本 开始 需要 与 移动 端 原 生 程序 进行 交互 ， 这 便 涉 及 与 移动 端 Native 
原生 程序 交互 的 协议 。 除 了 这 些 还 有 HTML5 的 WebSocket 实 时 通信 协 
议 、 与 服务 端 交互 的 RESTful 协 议 等 。 


可 见 ， 各 类 协议 在 前 端 开 发 中 被 应 用 于 方方面面 ， 那 么 在 这 一 章 
中 ， 我 们 就 一 起 来 看 看 与 前 端 开 发 密切 相关 的 协议 。 


2.1 _ HTTP 协议 简介 


2.1.1 _ HTTP 协议 概述 


HTTP (HyperText Transport Protocol ， 超 文本 传输 协议 ) 协议 是 
WWW 服 务 器 和 用 户 请 求 代理 〈 例 如 浏览 器 等 ) 之 间 通 过 应 答 请 求 模 
式 传 输 超 文本 (例如 HTML 文 件 、JavaScript 文 件 、CSS 文 件 、 图 片 甚 
至 服务 器 接口 数据 等 ) 内 容 的 一 种 协议 ， 协 议 的 详细 规范 序号 为 
RFC2616o 


图 2-1 为 某 用 户 使 用 浏览 器 请 求 http://www.jixianqianduan.com/ 首 页 
和 应 答 时 HTTP 消 息 内 容 的 传递 过 程 。 浏 览 器 (用户 请 求 代理 ) 向 服务 
器 发 送 请 求 时 头 部 中 包含 请 求 的 方法 GET、URL (Uniform Resource 
Location， 统 一 资源 定位 符 ) http:/www.jixiangianduan.com/、 协 议 版 本 
号 1.1、 请 求 头 域 字段 (如 请 求 接受 类 型 Accept) 、 缓 存 控制 Cache- 
Control、 浏 览 器 Cookie 和 user-Agent 信 息 等 ， 同 时 也 可 能 会 带 上 请 求 的 
正文 内 容 。 服 务 器 接收 请 求 处 理 后 也 是 以 一 段 响应 报 文 作为 返回 ， 咱 
应 的 内 容 包 括 HTTP 消 息 响 应 的 协议 版 本 1.1、 返 回 码 304 及 返回 描述 
Not Modified、 缓 存 控制 信息 Cache-Control 以 及 正文 的 HTML 内 容 等 ， 
当然 如 果 返 回 码 为 304 时 请 求 响应 返回 的 正文 为 空 ， 浏 览 器 将 从 本 地 缓 
存 中 读 取 文件 。 浏 览 器 接受 到 服务 器 的 返回 后 会 进行 解析 ， 同时 进行 
相应 的 操作 ， 例 如 将 服务 器 返回 正文 中 的 HTML 内 容 装 载 至 浏览 器 进 
行 解析 泻 染 ， 或 是 将 服务 器 返回 的 JSON 字 符 串 解析 成 前 端 可 用 的 
JSON 对 象 等 。 


HTTP 应 答 过 程 


GET / HTTP/1.1 
Accept: 接收 类 型 

Cache-Control: max-age=3600 

Cookie: 浏览 器 cookie 信 息 

Host: jixianqianduan. com 

If-Modified-Since: Tue, 12 Jul 2016 09:16:40 GMT 
Proxy-Connection: keep-alive 

Ser-Agent: 太 理 信息 

.…. 更 多 设置 


HTTP/1.1 304 Not Modified 
Cache-Control: max-age=3600 
Connection: keep-alive 

Date: Wed, 27 Jul 2016 07:38:44 GMT 
Expires: Mon, 25 Jul 2016 04:57:37 GMT 
Vary:Accept-Encoding 


...HTML 正 文 内 容 


图 2-1 _ HTTP 应 答 过 程 


通常 一 个 完整 的 HTTP 报 文 由 头 部 、 空 行 、 正 文 三 部 分 组 成 。 空 行 
用 于 区 分 报 文 头 部 和 报 文正 文 ， 由 一 个 回 车 符 和 一 个 换行 符 组 成 。 
2-2 是 一 个 HTTP 请 求 报 文 的 格式 结构 : 请 求 头 部 通常 由 请 求 类 型 、 请 
求 URI、 协 议 版 本 和 扩展 内 容 组 成 ; 请 求 头 中 还 包含 其 他 请 求 头 部 域 
信息 ， 如 Accept、Cookie、Cache-Control、Host 等 ;请求 正文 可 以 携带 
浏览 器 端 请 求 的 内 容 ， 如 POST、PUT 请 求 的 表单 内 容 。 响 应 返回 报 文 
的 格式 与 此 类 似 ， 图 2-3 为 服务 器 的 响应 报 文 结构 : 响应 报 文 头 部 由 状 
态 码 、 状 态 描述 、 协 议 版 本 、 扩 展 内 容 组 成 ; 响应 头 包含 响应 头 部 域 
信息 ， 如 Date、 Content-Type、 Cachel-Control、Expires 等 ; 服务 器 返 
回 给 浏览 器 的 信息 可 以 放 在 报 文 正文 部 分 。 


请 求 头 部 域内 容 : Accept\Cookie\Cache-Control\Host 等 


图 2-2 ”HITTP 请 求 头 部 结构 


图 2-3 HTTP 响应 头 部 结构 


HTTP 协 议 自 出 现 到 现在 ， 先 后 经 历 了 HTTP 0.9 版 本 、HTTP 1.0 版 
本 、HTTP 1.1 版 本 和 HTTP 2 版 本 这 四 个 版 本 。 不 过 ， 目 前 使 用 最 为 广 
泛 的 仍然 是 HTTP 1.1 版 本 。HTTP 1.1 标 准 发 布 于 1999 年 ， 相 对 于 HTTP 
1.0 增 加 了 协议 扩展 切换 、 缓 存 、 部 分 文件 传输 优化 、 长 连接 、 消 息 传 
递 、host 头 域 、 错 误 提 示 等 一 些 重要 的 增强 特性 。 接 下 来 我 们 就 简单 
了 解 一 下 HTTP 1.1 版 本 中 的 几 个 重要 特性 和 相关 的 应 用 场景 。 


2.1.2 HTTP1.1 
长 连接 


提 到 HTTP 1.1 协 议 ， 我 们 首先 想到 的 一 个 重要 特性 就 是 长 连接 。 
HTTP 1.1 的 长 连接 机 制 是 通过 请 求 头 中 keep-alive 头 域 信 息 来 控制 的 。 
HTTP 1.0 默 认 请 求 的 服务 器 返回 是 没有 keep-alive 的 ， 但 在 HTTP 1.0 
中 ， 如 果 要 建立 长 连接 ， 也 可 以 在 请 求 消息 中 包含 Connection: keep- 
alive 头 域 信息 ， 如 果 服 务 器 能 识别 这 条 连接 的 头 域 信息 ， 则 会 在 响应 
消息 头 域 中 也 包含 一 个 Connection: keep-alive 返 回 ， 表 示 后 面 的 文件 请 
求 可 以 复 用 之 前 的 连接 传输 。 但 是 在 HTTP 1.1 协 议 中 ， 任 何 HTTP 请 求 
的 报 文 头 部 域 都 会 默认 包含 keep-alive.keep-alive 的 控制 可 以 让 客户 端 
到 服务 器 闯 之 间 的 连接 在 一 段 时 间 内 持续 有 效 ， 当 一 个 请 求 文件 的 传 
输 连 接 建 立 以 后 ， 在 服务 器 保持 该 连接 的 这 段 时 间 内 ， 其 他 文件 请 求 
可 以 复 用 这 个 已 经 建立 好 的 连接 ， 而 不 用 像 HTTP 1.0 那 样 重新 握手 建 
立 连 接 ， 这 样 就 有 效 将 建立 和 关闭 连接 的 网 络 开销 平均 到 多 个 文件 的 
请 求 上 。 例 如 有 n 个 文件 的 连续 请 求 ， 每 个 文件 请 求 建 立 和 关闭 连接 的 
开销 为 ams (毫秒 ) ， 那 么 完全 使 用 HTTP 1.0 协 议 完 成 所 有 文件 请 求 
的 额外 开销 就 为 nxams， 而 使 用 HTTP 1.1 协 议 来 进行 文件 传输 额外 开 
销 仅 为 ams。 但 是 需要 注意 的 是 ， 长 连接 的 请 求 机 制 并 不 会 节省 传输 
内 容 的 网 络 开 销 。 


协议 扩展 切换 


te HTTP 1.1 协 议 支 持 在 请 求 头 部 域 消息 中 包含 
Upgrade 头 并 让 客户 端 通过 头 部 标识 令 服务 器 知道 它 能 够 支持 其 他 备用 
通信 协议 的 一 种 机 制 ， 服 务 器 根据 客户 端 请 求 的 其 他 协议 进行 切换 ， 
切换 后 使 用 备用 协议 与 客户 端 进行 通信 。 例 如 WebSocket 协 议 就 是 典型 
的 应 用 ，WebSocket 协 议 通 信 是 通过 HTTP 的 方式 来 建立 的 ， 通 信 连 接 
建立 完成 后 通知 服务 器 切换 到 WebSocket 协 议 来 完成 后 面 的 数据 通信 。 


图 2-4 为 WebSocket 协 议 的 连接 建立 过 程 ， 浏 览 器 (假设 用 户 使 用 
的 浏览 器 支持 WebSocket) 向 服务 端 发 送 请 求 ， 并 在 消息 头 中 添加 
Connection: Upgrade 和 和 Upgrade: websocket 告 诉 服务 器 后 面 需要 进行 协 
议 切 换 ， 切 换 成 为 WebSocket 协 议 进 行 通信 ， 如 果 服 务 端 支持 
WebSocket 服 务 并 允许 该 客户 端 来 连接 ， 则 可 以 在 响应 报 文 头 中 返回 
Upgrade 和 Connection 消 息 头 域 ， 同 意 浏览 器 使 用 WebSocket 来 连接 ， 
同时 返回 的 状态 码 为 101 表 示 请 求 还 需要 完成 协议 的 切换 。 


WebSocket 的 建立 过 程 


GET /ws HTTP/1.1 

Host: localhost 

Upgrade: websocket 
Connection: Upgrade 

0rigin: http:// 服 务 器 地 址 
Sec-WebSocket-Version: 版 本 
User-Agent: 用 户 代 理 信息 


HTTP/1.1 101 Switching Protocols 
Upgrade: websocket 
Connection: Upgrade 


图 2-4 ”WebSocket 通 信和 建立 过 程 


缓存 控制 


在 HTTP 1.1 版 本 之 前 ， 浏 览 器 缓存 主要 是 通过 对 HTTP 1.0 的 
Expires 头 部 控制 来 实现 的 ， 我 们 知道 Expires 只 能 根据 绝对 时 间 来 刷新 
缓存 内 容 ，HTTP 1.1 增 加 了 Cache-Control 头 域 ， 可 以 支持 max-age 用 来 
表示 相对 过 期 时 间 ， 另 外 请 求 服务 器 时 也 可 以 根据 Etag 和 Last- 
Modified 来 判断 是 否 从 浏览 器 端 缓存 中 加 载 文件 ， 此 时 缓存 的 控制 和 
判断 将 决定 服务 器 的 响应 报 文 中 人 下 面 
来 看 一 个 浏览 器 发 送 HTTP 请 求 时 进行 组 存 读 取 判 断 的 流程 。 


如 图 2-5 所 示 ， 浏 览 器 发 起 请 求 时 ， 头 部 域 字段 的 判断 过 程 主要 如 
下 所 述 。 


1. 浏览 器 会 先 查 询 Cache-Control (这 里 用 Expires 判 断 也 是 可 以 
的 ， 但 是 Expires 一 般 设 置 的 是 绝对 过 期 时 间 ， 在 HTTP 1.1 之 前 较为 通 
用 ，Cache-Control 设 置 的 是 相对 过 期 时 间 ，HTTP 1.1 后 推荐 使 用 
Cache-Control 来 控制 ， 如 果 两 者 都 设置 了 ， 则 只 有 Cache-Control 的 设 
置 生效 ) 来 判断 内 容 是 否 过 期 ， 如 果 未 过 期 ， 则 直接 读 取 浏 览 器 端 缓 
存 文件 ， 不 发 送 HTTP 请 求 ， 否 则 进入 下 一 步 。 


2. 在 浏览 器 端 判 断 上 次 文件 返回 关中 是 否 含有 Etag 人 信息， 有 则 带 
上 If-None-Match 字 段 信 息 发 送 请 求 给 服务 器 ， 服 务 端 判断 Etag 未 修改 
则 返回 304， 如 果 修 改 则 返回 200， 否 则 进入 下 一 步 。 


3. 在 浏览 器 端 判断 上 次 文件 返回 头 中 是 否 含 有 Last-Modified 信 
息 ， 有 则 带 上 If-Modified-Since 字 段 信息 发 送 请 求 ， 服 务 端 判断 Last- 
Modified 失 效 则 返回 200， 有 效 则 返回 304。 


4. 如 果 Etag 和 Last-Modified 都 不 存在 ， 则 直接 向 服务 器 请 求 内 
容 。 


这 就 是 Cache-Control、Etag 和 Last-Modified 控 制 请 求 缓 存 的 主要 过 


程 。 


测 邦 升 博 求 


有 缓存 


带 If-None-Match 
向 Web 服 务 器 请 求 


判断 是 否 有 
从 缓存 读 取 Last-Modified 
From Cache 


Pn 
| 


带 If-Modified-Since A 
向 Web 服 务 器 请 求 -a pi 


< 利 断 是 200 还 是 30 少 


304 无 更 新 


200 有 更 新 


从 缓存 读 取 


图 2-5 ”浏览 器 请 求 缓存 判断 过 程 


部 分 内 容 传 输 优 化 


部 分 内 容 传 输 优化 指 HTTP 可 以 支持 超 文本 文件 的 部 分 传输 ， 例 
如 ， 它 允许 请 求 一 个 文件 的 起 始 位 置 和 一 个 偏 移 长 度 来 进行 文件 内 容 
的 部 分 传输 。 


另外 HTTP 1.1 请 求 允 许 携带 一 些 数 据 参数 信息 一 起 发 送 到 服务 
器 ， 请 求 时 的 数据 信息 可 以 放 在 请 求 头 (例如 ，GET、DELETE 方 法 
请 求 时 ) 或 正文 (例如 ，POST、PUT 方 法 请 求 时 ) 中 。HTTP 请 求 在 


消息 的 正文 中 除了 可 以 携带 文本 内 容 ， 也 可 以 传输 二 进 制 数据 ， 例 如 
表单 中 使 用 formData 提 交 上 传 文 件 时 携带 的 就 是 二 进 制 数 据 。 


HTTP 报 文 的 头 部 域 信息 内 容 其 实 有 很 多 ， 每 个 头 部 域 字段 的 控 
制 都 具有 自己 的 逻辑 和 判断 机 制 ， 以 下 是 常见 的 一 些 头 部 域 字段 的 
设置 。 


1. Accept: 告诉 Web 服 务 器 自己 能 接收 什么 媒体 类 型 ，*/* 表 示 
能 接收 任何 类 型 ，type/* 表 示 接 收 该 类 型 下 的 所 有 子 类 型 ， 一 般 格式 
为 type/sub-type， 多 个 类 型 使 用 gq 参数 分 割 ，q 的 值 代表 quality 请 求 质 
量 ， 反 映 了 用 户 对 这 类 媒体 类 型 的 偏好 程度 ， 例 如 Accept: text/plain; 
q=0.5, text/html, text/x-dvi; q=0.8, text/X-Co 


2. Accept-Charset: 浏览 器 接收 内 容 的 字符 集 ， 通 常 是 utf-8。 


3. Accept-Encoding: 浏览 器 接收 内 容 的 编码 方法 ， 例 如 指定 是 
否 支 持 压缩 ， 若 支持 压缩 的 话 支 持 什么 压缩 方法 ， 具 体 如 Accept- 
Encoding:gzip, deflate, sdcho 


4. Accept-Language: 浏览 器 接收 内 容 的 语言 。 语 言 跟 字符 集 
是 有 区 别 的 ， 例 如 中 文 是 语言 ， 中 文 有 多 种 字符 集 ，big5、 
gb2312、gbk 等 。 该 参数 也 可 以 设置 多 个 ， 如 Accept-Language: zh- 
CN,zh;q=0.8。 


5. Accept-Ranges: Web 服 务 器 表明 自己 是 否 接受 获取 某 个 实体 
的 一 部 分 (比如 文件 的 一 部 分 请 求 ， 这 里 主要 用 于 部 分 文件 传 
输 ， 实 际 上 我 们 用 的 比较 少 。bytes 表 示 接 受 传输 多 大 长 度 内 容 ， 
none 表 示 不 接受 。 


6. Age: 一 般 当 服务 器 用 自己 缓存 的 实体 去 响应 请 求 时 ， 可 以 
用 该 头 部 表明 实体 从 产生 到 现在 经 过 了 多 长 时 间 ， 如 Age: 3600。 


7. Allow: 该 参数 头 部 可 以 设置 服务 端 支 持 接 收 哪些 可 用 的 
HTTP 请 求 方法 ， 例 如 GET、POST、PUT， 如 果 不 支持 ， 则 会 返回 
405(Method Not Allowed)。 


8. Authorization: 当 客 户 端 接收 到 来 自 Web 服 务 器 的 WWW- 
Authenticate 响 应 时 ， 后 面 可 以 用 该 头 部 来 携带 自己 的 身份 验证 信息 
给 Web 服务 器 直接 进行 认证 。 


9. Cache-Control: 用 来 声明 服务 器 端 缓存 控制 的 指令 。 包 括 请 
求 设置 指令 和 响应 请 求 指令 。 


请 求 控 制 指令 如 下 。 
no-cache: 不 使 用 缓存 实体 ， 要 求 从 Web 服 务 器 去 请 求 内 容 。 


max-age: 只 接受 Age 值 小 于 max-age 值 的 内 容 ， 即 没有 过 期 的 
请 求 对 象 。 


max-stale: 可 以 接受 过 去 的 对 象 ， 但 是 过 期 时 间 必 须 小 于 max- 
stale 值 。 


min-fresh: 接受 生命 期 大 于 其 当前 Age 跟 min-fresh 值 之 和 的 缓存 
对 象 。 


响应 控制 指令 如 下 。 


public: 可 以 用 Cache 中 内 容 回应 任何 用 户 。 


private: 只 能 用 缓存 内 容 回应 先前 请 求 该 内 容 的 具体 用 户 。 
no-cache: 可 以 设置 哪些 内 容 不 被 缓存 。 

max-age: 设置 响应 中 包含 对 象 的 过 期 时 间 。 

ALL: no-store 不 允许 缓存 。 


10. Connection: 在 请 求 尖 中，close 告 诉 Web 服 务 器 或 者 代理 服 
务 器 ， 在 完成 本 次 请 求 响应 后 断 开 连 接 ， 无 须 等 待 本 次 连接 的 后 续 
请 求 ，keep-alive 告 诉 Web 服 务 器 或 者 代理 服务 器 ， 在 完成 本 次 请 求 
响应 后 保持 连接 ， 等 待 本 次 连接 的 后 续 请 求 。 在 响应 头 中 ，close 连 
接 已 关闭 。keep-alive 保 持 连 接 ， 等 待 本 次 连接 的 后 续 请 求 ， 如 果 浏 
览 器 请 求 保持 连接 ， 则 该 头 部 表明 希望 Web 服 务 器 保持 连接 的 时 长 

( 秒 ) ， 例 如 ，keep-alive: 300。 


11. Content-Encoding ; 与 请 求 头 的 Accept-Encoding 对 应 ， 指 
Web 服 务 器 表明 使 用 何 种 压缩 方法 (gzip，deflate) 压缩 响应 中 的 对 
象 ， 例 如 ，Content-Encoding: gzip。 


12 .Content-Language: 与 请 求 头 中 的 Acceptr-Language 对 应 ， 
Web 服 务 器 告诉 浏览 器 响应 的 媒体 对 象 语言 。 


13. Content-Length: Web 服 务 器 告诉 浏览 器 HITP 请 求 内 容 的 
长 度 。 例 如 ，Content-Length: 1024。 


14. Content-Range: Web 服 务 器 表明 该 响应 包含 的 部 分 对 象 为 
整个 对 象 的 哪个 部 分 。 


15. Content-Type: 与 请 求 头 的 Accept 对 应 ， 指 明 Web 服 务 器 告 
诉 浏 览 器 响应 的 对 象 的 类 型 。 例 如 ，Content-Type : 


application/xmlo 


16. Etag: 对 象 (比如 URL) 的 标志 值 。 一 个 对 象 (如 HTML 
文件 ) 如 果 被 修改 了 ， 其 Etag 也 会 被 修改 ， 所 以 Etag 的 作用 和 Last- 
Modified 差 不 多 ， 主 要 供 Web 服 务 器 判断 一 个 对 象 是 否 改变 。 例 如 前 
一 次 请 求 某 个 HTML 文 件 时 获得 了 其 Etag， 当 这 次 又 请 求 该 文件 
时 ， 浏 览 器 就 会 把 先前 获得 的 Etag 值 发 送 给 Web 服 务 器 ， 然 后 Web 服 
务 器 会 将 这 个 Etag 值 跟 该 文件 当前 的 Etag 值 进行 对 比 ， 判 断 文件 是 


17. Expires: Web 服 务 器 表明 该 实体 将 在 什么 时 候 过 期 ， 对 于 
过 期 的 对 象 ， 只 有 在 跟 Web 服 务 器 验证 了 其 有 效 性 后 ， 才 能 用 来 响 
应 客户 请 求 ， 是 HTTP/1.0 的 头 部 。 例 如 ，Expires: Sat, 23 May 2009 
10:02:12 GMT。 


18. Host; 客户 端 指 定 自己 访问 的 Web 服 务 器 的 域名 /IP 地 址 和 


端口 号 。 例 如 ，Host: www.jixianqianduan.como 


19. INone-Match: 如 果 上 次 文件 返回 头 中 包含 Etag 信 息 ， 则 
会 带 上 If-None-Match 发 送 请 求 给 服务 器 ， 判 断 请 求 返 回 304 还 是 
200。 例 如 ，If-None-Match: W/"34blc4d4f5d8c61:d23"。 


20 .If-Modified-Since ; 如 果 上 次 文件 返回 头 中 包含 了 Last- 
Modified 信 息 ， 则 会 带 上 If-Modified-Since 发 送 请 求 给 服务 器 ， 判 断 
请 求 返回 304 还 是 200。 例如 ，If-Modified-Since: Thu, 10 Apr 216 
09:14:42 GMTo 


21. If-Range: 浏览 器 告诉 Web 服 务 器 ， 如 果 请 求 的 对 象 没有 改 
变 ， 就 把 修改 的 部 分 返回 给 浏览 器 ， 如 果 对 象 改变 了 ， 就 把 整个 对 
象 返 回 给 浏览 器 。 浊 鉴 划 通过 发 和 请 对象 的 Bag 或 者 自己 所 和 
的 最 后 修改 时 间 给 web 服务 器 ， 让 其 判断 对 象 是 否 改变 。If-Range 常 
常 跟 Range 头 部 一 起 使 用 。 


22. Last-Modified: Web 服 务 器 设置 的 对 象 最 后 修改 时 间 ， 比 
如 文件 的 最 后 修改 时 间或 者 动态 页 面 的 最 后 产生 时 间 。 例 如 Last- 
Modified: Tue, 06 Sep 2016 02:42:43 GMT。 


23. Location: Web 服 务 器 告诉 浏览 器 ， 试 图 访问 的 对 象 已 经 被 
移 到 别 的 位 置 了 ， 让 浏览 器 重 定 向 去 读 取 Location 里 面 返 回 的 内 
容 。 


24 . Pramga : 主要 使 用 Pramga: no-cache ， 相 当 于 Cache- 


Control: no-cache。 例 如 ，Pragma: no-cacheo 


25. Proxy-Authenticate: 代理 服务 器 响应 浏览 器 ， 要 求 其 提供 
代理 身份 验证 信息 。Proxy-Authorization: 浏览 器 响应 代理 服务 器 的 
身份 验证 请 求 ， 提 供 自己 的 身份 信息 。 


26. Range: 浏览 器 告诉 Web 服 务 器 自己 想 读 取 对 象 的 哪 部 分 。 


27. Referer: 浏览 器 向 web 服务 器 表明 自己 是 从 哪个 网 页 URL 
跳 转 访问 当前 请 求 中 网 址 URL 的 ， 即 跳 转 到 当前 页 面 的 来 源 。 例 


如 ，Referer: http:/www-.jixianqianduan.comy/。 


28. Server: Web 服 务 器 通过 此 头 域 表明 上 自己 是 什么 软件 及 版 本 
言 息 。 例 如 ，Server: Apache/2.2.18 (Unix)o 


29. UserAgent: 浏览 器 的 代理 名 称 ， 位 于 请 求 头 部 ， 通 常服 
务 端 可 以 根据 这 个 设置 获取 浏览 器 的 种 类 和 版 本 信息 。 例 如 ， 
Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/ 537.36 
(KHTM™ML, like Gecko) Chrome/53.0.2785.143 Safari/537.36。 


30. Transfer-Encoding: Web 服 务 器 表明 自己 对 本 响应 传输 消息 
体 做 怎样 的 编码 ， 如 是 否 分 块 (chunked) ，Transfer-Encoding: 
chunked。 


参 者 资料 : https://datatracker.ietf.org/doc/rfc2616/? 


include text=1。 


2.1.3 HIIP 2 


HTTP 2 即 超 文本 传输 协议 2.0 版 本 ， 是 HITP 协 议 的 下 一 个 版 本 。 
为 了 更 好 地 了 解 HITP 2， 我 们 先 来 了 解 一 下 SPDY 协 议 。SPDY 是 一 种 
基于 HTTP 的 兼容 协议 ， 由 Google 发 起 ，Chrome、Opera、Firefox 等 较 
新 的 浏览 器 已 提供 该 协议 支持 。SPDY 传 输 支 持 多 路 复 用 和 服务 器 推 
送 技术 ， 压 缩 了 HTTP 头 部 减 小 了 请 求 大 小 ， 并 强制 使 用 SSL 传 输 协 
议 ， 到 目前 为 止 已 经 成 为 了 一 套 成 熟 的 高 效 协议 标准 。 但 由 于 SPDY 
必须 使 用 HTTPS 协 议 ， 所 以 之 前 HITP 的 网 站 就 无 法 直接 使 用 SPDY， 
因此 最 终 HTTP Working-Group 决 定 以 SPDY 2 版 本 协议 规范 为 基础 ， 开 
发 HTTP 2 协议 ， 能 将 文件 内 容 在 网 络 中 进行 高 效 传输 ， 同 时 和 希望 使 用 
HPACK 算 法 (为 HTTP 2 头 讨 缩 专门 设计 的 算法 ) 来 压缩 协议 的 消息 
头 。 最 终 形成 了 目前 广为人知 并 且 极 具 优势 的 下 一 代 超 文本 传输 协议 
HTTP 2。 


HTTP 2 相对 于 之 前 的 HTTP 协 议 有 以 下 几 个 优点 。 


o HTTP 2 采用 完全 二 进 制 的 格式 来 传输 数据 ， 而 非 HTTP 1.x 的 
默认 文本 格式 。 而 二 进 制 在 网 络 中 传输 的 基本 单位 一 般 为 帧 
(Frame， 一 个 帧 可 以 理解 为 具有 固定 格式 和 长 度 的 二 进 制 
数据 包 ) ， 每 个 帧 包含 几 个 固定 部 分 内 容 : 类 型 Type、 长 度 
Length、 标 记 Flags、 流 标识 Stream 和 Frame payload 〈 帧 有 效 
载荷 ， 一 帧 能 携带 的 内 容 数据 长 度 ) 。 多 个 帧 的 传输 在 网 络 
中 就 形成 了 帧 的 传输 网 络 流 ， 所 以 我 们 也 可 以 理解 为 HTTP 2 
协议 是 通过 流 式 传输 的 。 同 时 HTTP 2 对 消息 头 采 用 HPACK 
压缩 传输 ， 最 大 限度 地 节省 了 传输 带宽 。 相 比 于 HTTP 1.x 每 
次 请 求 都 会 携带 大 量 元 余 头 信息 (例如 浏览 器 Cookie 信 息 
等 ) ，HTTP 2 就 具有 很 大 的 优势 了 。 


o HTTP 2 使 用 TCP 多 路 复 用 的 方式 来 降低 网 络 请 求 连接 建立 和 
关闭 的 开销 ， 多 个 请 求 可 以 通过 一 个 TCP 连 接 来 并 发 完成 。 
HTTP 1.1 虽 然 也 可 通过 PipeLine 实 现 并 发 请 求 ， 但 是 PipeLine 
是 通过 串 行 传输 的 ， 多 个 请 求 之 间 的 响应 可 能 会 被 阻塞 。 


这 里 我 们 有 必要 明确 一 下 TCP 连 接 复 用 和 HTTP 1.1 中 keep-alive 
连接 复 用 的 区 别 : TCP 复 用 传输 是 发 生 在 传输 层 的 ， 而 keep-alive 控 
制 的 文件 的 连接 复 用 是 在 应 用 层 的 ; keep-alive 的 连接 复 用 是 串 行 
的 ， 即 一 个 文件 传输 完 后 ， 下 个 文件 才能 复 用 这 个 连接 ， 而 TCP 复 
用 是 帧 的 多 路 复 用 ， 即 不 同文 件 的 传输 帧 可 以 在 一 个 TCP 连 接 中 一 
起 同时 进行 流 式 传输 。 


o HTTP 2 支持 传输 流 的 优先 级 和 流量 控制 机 制 。HTTP 2 中 每 个 
文件 传输 流 都 有 自己 的 传输 优先 级 ， 并 可 以 通过 服务 器 来 动 
态 改变 ， 服 务 器 会 保证 优先 级 高 的 文件 流 先 传输 。 例 如 在 未 
来 的 浏览 绒 端 泻 染 中 ， 服 务 器 端 融 可 以 优先 传输 CSS 文 件 保 
证 页 面 的 泻 染 ， 然 后 在 CSS 文 件 全 部 传输 完成 后 加 载 
JavaScript 脚 本 文件 。 其 实 这 就 和 我 们 现在 前 端 一 些 优化 规则 
有 点 相 背 离 ， 例 如 使 用 HTTP 2 的 情况 下 CSS 文 件 就 不 一 定 要 
写 在 HTML 的 顶部 ，JavaScript 也 不 一 定 要 在 HTML 最 底部 写 
了 ， 因 为 HTTP 2 的 服务 器 自动 就 能 帮 你 做 这 件 事 情 。 


o 支持 服务 器 端 推 送 。 服 务 端 能 够 在 特定 条 件 下 把 资源 主动 推 
送 给 客户 端 。 就 像 浏览 器 端的 资源 预 加 载 一 样 ， 例 如 资源 推 
送 可 以 在 HTML 文档 下 载 之 前 让 HTML 的 JavaScript 或 CSS 文 
件 先进 行 下 载 ， 从 而 大 大 缩短 页 面 加 载 泻 染 的 等 待 时 间 。 


所 以 基于 这 些 HTTP 2 的 优势 特性 ， 有 人 提出 : 如 果 推 广 HTTP 2， 
原 有 网 站 的 一 些 优 化 规则 将 不 再 适用 。 其 实 两 者 也 不 完全 是 矛盾 的 。 
一 方面 ， 使 用 HTTP 2 会 极 大 程度 上 提高 网 络 的 传输 效率 ， 让 我 们 可 以 
更 少 地 关注 页 面 的 性 能 优化 ， 是 对 现在 开发 优化 手段 的 一 个 增强 。 另 
一 方面 ， 现 有 的 优化 规则 依然 能 对 前 端 资源 的 加 载 和 执行 起 到 进一步 
优化 的 作用 。 同 时 ， 我 们 也 必须 要 了 解 ，HTTP 2 和 我 们 还 有 相当 一 段 
距离 ， 目 前 支持 HTTP 2 协议 传输 的 浏览 器 依然 很 少 ， 至 少 需 要 达到 
EDGE 13、Chrome 45 或 Safari 9.2 以 上 版 本 。 随 着 技术 的 发 展 和 浏览 
的 更 新 迭代 ，HTTP 2 的 时 代 终 会 到 来 ， 但 我 们 依然 不 能 在 短 时 间 内 企 
图 通过 它 来 帮 有 我 们 进行 页 面 优化 。 


2.2 ”web 安 全 机 制 


Web 前 端 安 全 方面 涵盖 的 内 容 较 多 ， 也 是 前 端 项 目 开发 中 必须 要 
关注 的 一 个 重要 部 分 。 在 Web 站 点 开发 中 ， 如 果 没 有 很 好 的 安全 防护 
音 施 ， 不 仅 可 能 因为 攻击 者 的 恶意 行为 影响 站 点 页 面 功能 、 泄 露 用 户 
授权 隐私 ， 甚 至 还 可 能 会 直接 市 来 用 户 经 济 上 的 损失 。 尽 管 如 此 ， 我 
们 现在 依然 会 找到 大 量 含 有 Web 端 安全 漏洞 的 页 面 ， 那 么 这 一 忆 我 们 
就 来 理 一 理 与 Web 前 端 安全 方面 相关 的 问题 。 


2.2.1 基础 安全 知识 


XSS (Cross Site Script， 跨 站 脚本 攻击 ) 、SQL (Structured Query 
Language ， 结 构 化 查询 语言 ) 注入 和 CSRF (Cross-site Request 
Forgery， 跨 站 请 求 伪造 ) 均 属 于 基础 的 前 端 安 全 知识 ， 逐 个 来 看 一 
Fa 


XSS 


XSS 通 常 是 由 带 有 页 面 可 解析 内 容 的 数据 未 经 处 理 直 接 插入 到 页 
面 上 解析 导致 的 。 需 要 注意 的 是 ，XSS 分 为 存储 型 XSS、 反 射 型 XSS、 
MXSS (也 叫 DOM XSS) 三 种 。 这 里 区 分 不 同类 型 主要 是 根据 攻击 脚 
本 的 引入 位 置 : 存储 型 XSS 的 攻击 脚本 常常 是 由 前 端 提交 的 数据 未 经 
处 理 直 接 存储 到 数据 库 然 后 从 数据 库 中 读 取出 来 后 又 直接 插入 到 页 面 
中 所 导致 的 ， 反 射 型 XSS 可 能 是 在 网 页 URL 参 数 中 注入 了 可 解析 内 容 
的 数据 而 导致 的 ， 如 果 直 接 获 取 URL 中 不 合法 的 并 插入 页 面 中 则 可 能 
出 现 页 面 上 的 XSS 攻 击 ; MXSS 则 是 在 泻 染 DOM 属 性 时 将 攻击 脚本 插 
入 DOM 属 性 中 被 解析 而 导致 的 。XSS 主 要 的 防范 方法 是 验证 输入 到 页 


面 上 所 有 内 容 来 源 数据 是 否 安全 ， 如 果 可 能 含有 脚本 标签 等 内 容 则 需 
要 进行 必要 的 转 义 。 具 体 看 下 面 几 个 例子 。 


<!-- 存储 型 XSS， 后 台 从 数据 库 中 读 取 数据 返回 并 在 前 端 页 面 模板 中 直接 泻 染 导致 
存储 型 XSS， 上 比较 好 理解 ， 下 面 
是 我 们 要 泻 染 的 内 容 模板 - -> 


<div>{{ content }}</div> 


<1-- 泻 染 后 输出 内 容 为 - -> 


<div><script>alert();</script></div> 


<!-- MXSS， 页 面 标签 元 素 属性 在 前 端 泻 染 时 含有 可 解析 的 标签 导致 ， 下 面 是 要 泻 染 
的 内 容 --> 
<p calss="class-a {{b}}"></p> 


<!-- 插入 恶意 脚本 内 容 的 输出 结果 - -> 
<p calss="class-a "><script>alert()</script><p class="class-b"> 


</p> 


// 反射 型 XSS, 例如 Node 服务 器 端 泻 染 数据 ，web 服务 器 脚本 从 前 端 URL 中 
获取 数据 后 直接 泻 染 到 前 端 页 面 导致 

// 反射 型 XSS 

let name = req.query['name'l]; 

this.body = ‘<div>${name}</div> ，; 

// 如 果 url 里 传递 的 name 参数 值 为 '<script>alert();</script>'， 则 输 
出 为 <div><script>alert(); 

</script></div>， 会 导致 页 面 上 的 XSS 


常见 的 XSS 场 景 主要 包含 下 面 这 些 ， 基 于 这 些 基本 的 场景 ， 可 以 
有 更 多 不 同 的 情况 出 现 。 所 以 针对 这 些 问题 我 们 需 
验 工作 ， 一 般 的 做 法 是 将 所 有 可 能 包含 攻击 的 内 容 进 行 HIML 字 符 编 
码 转 义 ， 目 前 的 HTML 字 符 编 码 解码 就 可 以 如 下 实现 。 


// HTML 字符 转译 编码 

function htmlEncode(str) { 
let s= '',; 
if (str.length == 0) return ''; 
s = str.replace(/&/g, '&amp;'); 
s = s.replace(/</g, '&lt;'); 
s = s.replace(/>/g, '&gt;'); 
s = s.replace(/ /g, '&nbsp;'); 
s = s.replace(/\'/g, '&#39;'); 
s = s.replace(/\"/g, ‘'&quot;'); 
s = s.replace(/\n/g, '<br>'); 


return s,; 


// HTML 字符 转译 解码 
function htmlDecode(str) { 
let s = ''"，; 
if (str.length == 0) return ''; 


Ss = str.replace(/&amp;/g, '&'); 


s= s.replace(/&lt;/g, '<'); 


S = s.replace(/&gt;/g, '>'); 


s= s.replace(/&nbsp;/g, ' '); 


S = s.replace(/&#39;/g, '\''); 
S = s.replace(/&quot;/g, '\"'); 
S = s.replace(/<br>/g, '\n'); 


return S， 


这 样 ，script 等 内 容 的 标签 符号 就 会 直接 在 页 面 中 显示 ， 而 不 是 被 
浏览 器 解析 成 script 的 DOM 节 点 来 执行 了 。 


<div>{{ htmlEncode(content) }}</div> 


<!- - 特殊 字符 转 义 后 ， 只 显示 在 页 面 上 ， 不 会 被 解析 - -> 


<script>alert();</script> 


SQL 注 入 攻击 


SQL 注入 攻击 主要 是 因为 页 面 提交 数据 到 服务 器 端 后 ， 在 服务 器 
端 未 进行 数据 验证 就 将 数据 直接 拼接 到 SQL 语 句 中 执行 ， 因 此 产生 执 
行 与 预期 不 同 的 现象 。 主 要 防范 措施 是 对 前 端 网 页 提交 的 数据 内 容 进 
行 严 格 的 检查 校 验 。 


let id = req.query['id"']; 


let Sql = ‘select * from user_table where id=${id}.; 


let data = exec(sql1); 
this.body = data,; 


例如 以 上 实例 ， 如 果 前 端 传 入 的 id 内 容 为 "100 or name=%user%"， 
那么 查询 出 来 的 结果 就 不 只 是 id=100 的 用 户 了 ， 包 含 user 字 符 用 户 名 的 
用 户 内 容 也 都 会 被 查询 出 来 ， 并 且 这 些 用 户 信息 都 可 能 被 输出 ， 导 致 
SQL 注入 的 发 生 。 所 以 这 时 我 们 需要 对 传 入 的 id 内 容 进 行 检验 ， 检 查 
是 否 包 含 非 法 内 容 。 


CSRF 


CSRF 是 指 非 源 站 点 按照 源 站 点 的 数据 请 求 格式 提交 非法 数据 给 源 
站 点 服务 器 的 一 种 攻击 方法 。 非 源 站 点 在 取 到 用 户 登录 验证 信息 的 情 
况 下 ， 可 以 直接 对 源 站 点 的 某 个 数据 接口 进行 提交 ， 如 果 源 站 点 对 该 
提交 请 求 的 数据 来 源 未 经 验证 ， 该 请 求 可 能 被 成 功 执行 ， 这 其 实 并 不 
合理 。 通 常 比较 安全 的 是 通过 页 面 Token ( 令 牌 ) 提交 验证 的 方式 来 验 
证 请 求 是 否 为 源 站 点 页 面 提交 的 ， 来 阻止 跨 站 伪 请 求 的 发 生 。 


如 图 2-6 所 示 ， 用 户 通 过 源 站 点 页 面 可 以 正常 访问 源 站 点 服务 器 接 
口 ， 但 是 也 有 可 能 被 钓鱼 进入 伪 站 点 来 访问 源 服务 器 ， 如 果 伪 站 氮 通 
过 第 三 方 或 用 户 信息 拼接 等 方式 获取 到 了 用 户 的 信息 ， 直 接 访 问 源 站 
点 的 服务 器 接口 进行 关键 性 操作 (例如 支付 扣 款 或 返回 用 户 隐私 信息 
等 操作 ) ， 此 时 如 果 源 站 点 服务 器 未 做 校 验 防护 ， 伪 站 点 的 请 求 操作 
就 可 以 被 成 功 执行 。 另 一 种 情况 则 可 能 是 资 刷 源 站 点 的 登录 等 接口 来 
暴力 破解 用 户 密码 的 情况 ， 如 果 源 站 点 不 添加 防护 措施 ， 用 户 信息 就 
极 可 能 被 资 取 ， 所 以 我 们 需要 进行 安全 性 验证 。 


正常 提交 


正常 访问 
获取 用 户 认 证 信息 
非法 提交 


钓鱼 访问 
伪 站 点 页 面 非法 盗 刷 用 户 信息 


终端 用 户 


信息 盗 刷 服务 


图 2-6 ”CSRF 攻 击 原 理 


如 图 2-7 所 示 ， 我 们 在 源 站 点 服务 请 求 调用 时 添加 了 对 源 站 点 的 验 
| 使 用 服务 器 端 实时 返回 加 密 的 验证 Token 给 源 站 点 页 面 ， 在 源 站 点 

面 提 交 时 将 Token 一 起 带 给 服务 器 验证 ， 而 Token 是 不 会 被 其 他 伪 站 
Ee 而 非法 的 伪 站 点 和 盗 刷 的 行为 就 可 以 被 直接 拒绝 掉 ， 这 样 
就 大 大 降低 了 CSRF 发 生 的 概率 。 所 以 在 Web 后 端 ， 我 们 常常 会 进行 
Token 的 验证 ， 其 中 一 种 形式 是 将 页 面 提交 到 后 台 的 验证 Token 与 
session 临 时 保存 的 Token 进 行 比较 就 可 以 来 实现 了 。 


// 生成 随机 的 csrf 验证 Token， 并 返回 给 前 端 页 面 
this.session.csrf = md5(Math.random(©0, 1).toSstring()).slice(5, 
15); 
this.body = yield render('user/login', { 
csrf: ctx.session.csrf 


}); 


// 提交 时 验证 Token 是 否 与 源 站 的 Token 相同 
let csrf = this.request.body['csrf']; 
if (csrf !== this.session.csrf) { 

res = { 

code: 403, 
msg: ' 不 明 网 站 来 源 提交 ' 

} 
} else { 

// 正常 提交 后 的 处 理 逻 辑 


| 1 验证 Token 


一 一 一 一 带 Token 提 交 源 站 点 服务 器 


正常 访 问 
获取 用 户 认 证 信息 - 
验证 失败 


钓鱼 访问 
终 妆 用 户 伪 站 点 页 面 验证 失败 


图 2-7 ”CSRF 预 防 机 制 | 


目前 解决 CSRF 的 最 佳 方 式 就 是 通过 加 密 计算 的 Token 验 证 ， 而 
Token 除 了 通过 session 也 可 以 使 用 HTTP 请 求 头 中 Authorization 的 特定 
认证 字段 来 传递 。 当 然 并 不 是 说 使 用 了 Token， 网 站 调用 服务 就 安全 
了 ， 单 纯 的 Token 验 证 防止 CSRF 的 方式 理论 上 也 是 可 以 被 破解 的 ， 
例如 可 以 通过 域名 伪造 和 拉 取 源 站 实时 Token 信 息 的 方式 来 进行 提 
交 。 另 外 ， 任 何 所 谓 的 安全 都 是 相对 的 ， 只 是 说 理论 的 破解 时 间 变 
长 了 ， 而 不 容易 被 攻击 。 很 多 时 候 要 使 用 多 种 方法 结合 的 方式 来 一 
起 增加 网 站 的 安全 性 ， 可 以 结合 验证 码 等 手段 大 大 减少 资 刷 网 站 用 
户 信 息 的 频率 等 ， 进 一 步 增强 网 站 内 容 的 安全 性 。 


2.2.2 ”请 求 劫持 与 HTTPS 


现在 除了 正常 的 前 后 端 脚本 安全 问题 ， 网 络 请 求 动 持 的 发 生 也 越 
来 越 频 繁 。 网 络 动 持 一 般 指 网 站 资源 请 求 在 请 求 过 程 中 因为 人 为 的 攻 
击 导 致 没有 加 载 到 预期 的 资源 内 容 。 网 络 请 求 劫持 目前 主要 分 为 两 
种 : DNS 劫持 与 HTTP 劫 持 。 下 面具 体 看 看 两 种 方式 各 是 什么 样 的 。 


DNS 劫持 


DNS 动 持 通常 是 指 攻击 者 支持 了 DNS 服 务 器 ， 通 过 某 些 手段 取得 
某 域 名 的 解析 记录 控制 权 ， 进 而 修改 此 域名 的 解析 结果 ， 导 致 用 户 对 
该 域名 地 址 的 访问 由 原 卫 地 址 转 入 到 修改 后 的 指定 耻 地 址 的 现象 ， 其 
结果 就 是 让 正确 的 网 址 不 能 解析 或 被 解析 指向 另 一 网 站 IP， 实 现 获 取 
用 户 资 料 或 者 破坏 原 有 网 站 正常 服务 的 目的 。DNS 劫 持 一 般 通过 修改 


DNS 服务 器 上 的 域名 解析 记录 ， 来 返回 给 用 户 一 个 错误 的 DNS 查询 结 
果实 现 。 


如 图 2-8 所 示 ，DNS 劫 持 症状 可 能 为 在 某 些 地 区 的 用 户 在 成 功 连 接 
宽带 网 络 后 ， 访 问 域名 为 www.a.com 的 网 站 ， 出 现 的 却 是 www.b.com 
网 站 的 内 容 ， 因 为 DNS 服务 器 www.a.com 域 名 的 解析 结果 被 修改 指向 
了 www.b.com 网 站 指向 的 了 P 地 址 。 


www. a. com 10. 0. 0. 1 
www. b. com 10. 0. 0. 2 
被 算 改 成 : 

www. a. com 10. 0. 0. 2 


DNS 服务 器 


DNS 解析 


实际 访问 10.0.0.2 


图 2-8 DNS 劫持 原理 


HTTP 动 持 


HTTP 动 持 是 指 ， 在 用 户 浏览 器 与 访问 的 目的 服务 器 之 间 所 建立 的 
网 络 数据 传输 通道 中 从 网 关 或 防火 墙 层 上 监视 特定 数据 信息 ， 当 满足 


一 定 的 条 件 时 ， 就 会 在 正常 的 数据 包 中 插入 或 修改 成 为 攻击 者 设计 的 
网 络 数 据 包 ， 目 的 是 让 用 户 浏览 器 解释 “错误 ”的 数据 ， 或 者 以 弹出 新 
窗口 的 形式 在 使 用 者 浏览 器 界面 上 展示 宣传 性 广告 或 者 直接 显示 某 块 
其 他 的 内 容 。 


如 图 2-9 所 示 ， 这 种 情况 下 一 般 用 户 请 求 源 网 站 的 IP 地 址 及 网 站 加 
载 的 内 容 和 上 脚本 都 是 正确 的 ， 但 是 在 网 站 内 容 请 求 返回 的 过 程 中 ， 可 
能 被 I SP (Internet Service Provider， 互 联网 服务 提供 商 ) 劫持 修改 ， 最 
终 在 浏览 器 页 面 上 添加 显示 一 些 广告 等 内 容 信 息 。 


对 于 这 些 情况 ， 网 站 开发 者 常常 就 无 法 通过 修改 网 站 代码 程序 等 
手段 来 进行 防范 了 。 请 求 动 持 唯一 可 行 的 预防 方法 就 是 尽量 使 用 
HTTPS 协 议 来 访问 目标 网 站 。 


DNS 服务 器 


DNS 解析 


数据 内 容 请 求 
www. a. com Web 服务器 
经 过 运营 商 网 络 


Xi+ 


数据 被 修改 


ISP 提 供 商 


图 2-9 HTTP 请 求 动 持 原理 


2.2.3 HTTPS 协 议 通信 过 程 


HTTPS 协 议 是 通过 加 入 SSL (Secure Sockets Layer) 层 来 加 密 
HTTP 数 据 进行 安全 传输 的 HITP 协 议 ， 同 时 启用 默认 的 443 端 口 进行 数 
据 传输 。 那 么 使 用 HTTPS 是 怎样 保证 浏览 器 和 服务 器 之 间 数 据 安全 传 
输 的 呢 ? 我 们 需要 先 理解 两 个 概念 : 公 钥 和 私 钥 。 


公 钥 (Public Key) 与 私 钥 (Private Key) 是 通过 一 种 加 密 算法 得 
到 的 密 钥 对 〈 即 一 个 公 钥 和 一 个 与 之 匹配 的 私 钥 ; ， 公 钥 是 密 钥 对 中 
公开 的 部 分 ， 私 钥 则 是 非 公 开 的 部 分 。 公 钥 通 常用 于 会 话 加 密 、 验 证 
数字 签名 或 者 加 密 可 以 用 相应 私 钥 解密 的 数据 。 通 过 这 种 算法 得 到 的 


密 钥 对 保证 是 唯一 的 。 使 用 这 个 密 钥 对 的 时 候 ， 如 果 用 其 中 一 个 密 钥 
加 密 一 段 数据 ， 则 必须 用 另 一 个 密 钥 解密 。 比 如 用 公 钥 加 密 数据 就 必 
须 用 私 钥 解 密 ， 如 果 用 私 钥 加 密 也 必须 用 公 角 解密， 否则 解密 将 不 会 
成 功 。 我 们 以 公 钥 加 密 方式 为 例 ， 来 看 看 HTTPS 进 行 消息 安全 通信 的 


整个 过 程 。 


如 图 2-10 所 示 ， 客 户 端 在 需要 使 用 HTTPS 请 求 数据 时 ， 首 先 会 发 
起 连接 请 求 ， 告 诉 服 务 器 将 建立 HTTPS 连 接 ; 服务 器 收 到 通知 后 自己 
生成 一 个 公 钥 并 将 它 返 回 给 客户 端 ， 如 果 是 第 一 次 请 求 ， 同 时 还 要 告 
诉 客户 端 需要 进行 连接 验证 ， 如 果 需 要 验证 ， 客 户 端 接收 到 服务 器 公 
钥 后 开始 发 送 验证 请 求 ， 将 一 个 特定 的 验证 串 使 用 服务 器 返回 的 公 镭 
加 密 后 形成 密 文 发 送 给 服务 器 ， 同 时 客户 端 也 将 自己 生成 的 公 钥 发 送 
给 服务 器 ， 服 务 器 获取 到 加 密 的 报 文 和 客户 端 公 钥 ， 先 使 用 服务 器 私 
钥 解密 报 文 获得 验证 串 ， 然 后 将 验证 串通 过 接收 到 的 客户 端 公 钥 加 密 
后 返回 给 客户 端 ; 客户 端 再 通过 私 钥 解密 验证 串 ， 判 断 是 否 为 自己 开 
始 发 送 的 验证 串 ; 如 果 正 确 ， 说 明 双 方 的 连接 是 安全 的 ， 连 接 验 证 成 
功 ， 客 户 端 开始 将 后 面 的 数据 通过 服务 器 初始 返回 的 公 钥 不 断 加 密 发 
送 给 服务 器 ， 服 务 器 也 不 断 解密 获取 报 文 ， 并 通过 客户 端 公 钥 加 密 响 
应 的 报 文 内 容 返 回 给 客户 端 验证 。 这 样 就 建立 了 HTTPS 双 向 的 加 密 传 
输 连 接 。 


eT 
才 红 


证 串 ， 验 证 是 否 正确 


Server 使 用 私 钥 解 密 数 
据 


图 2-10 ” HTTPS 通信 建立 过 程 


在 这 种 情况 下 ， 传 输 层 传输 的 内 容 不 会 以 明文 的 方式 显示 ， 而 且 
HTTPS 的 请 求 只 能 被 添加 了 对 应 数字 证 书 的 应 用 层 代理 拦截 ， 因 此 第 
三 方 攻击 者 就 无 计 可 施 了 。 通 单 我 们 要 创建 HITPS 服 务 ， 在 服务 端 可 
以 使 用 对 应 的 模块 来 实现 ， 例 如 在 Node 端 就 可 以 用 以 下 方法 来 实现 。 


// 引入 https 模块 
const httpsModule = require('https'); 


const fs = require('fs'); 


// 加 载 网 站 https 服务 证 书 文件 ， 证 书 一 般 需要 注册 申请 
const https = httpsModule.Server(t{ 
key: fs.readFileSync('/path/to/server.key'), 


cert: fs,.readFileSync('/path/to/server.crt') 


}, function(req, res)t 
res.writeHead(200); 
res.end("hello world\n"); 


}); 


// https 默认 监听 端口 443 

https.listen(443, function(err)t{ 
console.log("https listening on port: 443"); 

}); 


当然 ， 如 果 使 用 Web 框架， 也 可 以 通过 更 简单 的 方式 创建 一 个 
HTTPS 服 务 器 。 


const koa = require('koa'); 


const app = koal(); 


// 同时 监听 多 个 端口 
app.1listen(80); 
app.1listen(443); 


2.2.4 HTTPS 协 议 解 析 


那么 ，HTTPS 通 信和 HTTP 通 信和 方式 有 什么 不 同 呢 ? 接 下 来 我 们 
具体 看 看 HTTPS 通 信 的 内 容 ， 我 们 以 打开 https: /github.com/ouvens 页 
面 内 容 的 过 程 为 例 ， 来 理解 HTTPS 请 求 消息 的 一 些 关 键 性 结构 。 


Request URL:https://github.com/ouvens 
Request Method:GET 

Status Code:200 OK (from cache) 
Remote Address:192.30.252.131:443 


Request Headers 


图 2-11 所 示 为 HITPS 的 请 求 头 部 内 容 ， 图 2-12 所 示 为 HITPS 的 响 
应 头 部 内 容 。 从 图 中 可 以 看 出 ，HTTPS 请 求 报 广 和 和 HTTP 的 请 求 报 文 
区 别 不 大 ， 但 是 在 请 求 的 头 部 域 字段 多 了 upgrade-insecure-requests， 该 
头 部 字段 指令 很 关键 ， 它 可 以 用 于 让 页 面 打 开 的 后 续 请 求 自 动 从 HTTP 
请 求 升级 到 HTTPS 请 求 。 否 则 如 果 使 用 HTTPS 来 加 载 HTML 文 件 ， 而 
HTML 中 加 载 的 是 HTTP 链 接 的 资源 文件 ， 则 会 产生 Mixed Content 类 型 
的 错误 ， 并 且 无 法 加 载 资 源 。 考 虑 到 这 个 问题 ，W3C 在 2015 年 4 月 出 
台 了 一 个 Upgrade Insecure Requests 的 草案 ， 作 用 就 是 让 浏览 器 自动 升 
级 后 面 请 求 为 HTTPS 请 求 。 同 时 我 们 在 服务 器 端 响 应 头 域 中 也 要 加 入 
下 面 的 头 域 来 返回 给 浏览 器 ， 否 则 浏览 器 默认 安全 显示 策略 会 阻塞 内 
容 并 提示 block-all-mixed-content 类 型 的 错误 。 


header("Content-Security-Policy: upgrade-insecure-requests") ，; 


Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8 
Accept-Encoding: gzip，deflate，sdch 

Accept-Language: zh-CN,zh;q=9.8 

Cache-Control: max-age=8 

Connection: keep-alive 

Cookie: _octo=GH1.1.1139196484.1452477462j logged in=yes; dotcom user=ouvens; _gh_sess=ey]JSsYXN6X 
3dyaXR1lIjoxNDUAMDk2NjUSMDY3LCJzZXNzaW9uX21kIjoiYzQ80Td1MWQ2ZDM3MmUyMzhmNT11MWI1NDc1Y2Ix0DgifQ%3 
D%3D--d325338462324fd3fA46bc183355b644ad4cc8198; user_session=aeWkxGgL3sAnsCvHpTD3B1t2_63jk-Pc2L 
Je-9euRmakOXPfVujKGcnUBcMothpSrKH_sCjMvlznKjS-; _ga=GAl.2.261276238.1452477482; tz=Asia%2FShang 
hai 

Host: github.com 

Referer: https://github.com/ 

Upgrade-Insecure-Requests: 1 

User-Agent: Mozilla/5.8 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/4 
9.9.2623.87 Safari/537.36 


图 2-11 HTTPS 请 求 头 部 内 容 


Content-Security-Policy: default-src *; base-uri 'self'; block-all-mixed-content; child-src 'self' 
render.githubusercontent.com; connect-src ‘self' uploads.github.com status.github.com api.githu 
b.com www.google-analytics.com github-cloud.s3.amazonaws.com wss://live.github.com; font-src as 
sets-cdn.github.com; form-action “self”github .com gist.github.com; frame-src 'self' render.git 
hubusercontent.com; img-src “self” data: assets-cdn.github.com identicons.github.com www.google 
-analytics.com collector.githubapp.com *.gravatar.com *.wp.com *.githubusercontent.com; media-s 
rc 'none'; object-src assets-cdn.github.com; plugin-types application/x-shockwave-flash; script 
-src assets-cdn.github.com; style-src 'self'’ ‘unsafe-inline' assets-cdn.github.com 
Content-Type: text/html; charset=utf-8 

Date: Wed, 16 Mar 2816 83:24:32 GMT 

Public-Key-Pins: max-age=380; pin-sha256="WoiWRyIOVNa9ihaBciRSC7XHjliYS9VwUGOIud4PB18="; pin-sha2 
56=" JbQbUGSJMJUoI6brnx@x3vZF6jilxsapbXGVfjhN8Fg="; includeSubDomains 

Server: GitHub.com 

Set-Cookie: user session=aeWkxGgL3sAnsCvHpTD3B1t2 63jk-Pc2LJe-9euRmakOXPfVujR8I9maqWelLzpMDPCt1w8| 
Vdv2FQOt; path=/; expires=Wed, 38 Mar 2016 03:24:32 -6066;j secure; HttpOnly 

Status: 2608 OK 

Strict-Transport-Security: max-age=31536608; includeSubdomains; preload 

Transfer-Encoding: chunked 

Vary: X-PJAX 

Vary: Accept-Encoding 

X-Content-Type-Options: nosniff 

X-Frame-Options: deny 

X-GitHub-Request-1d: 67871C87:688C:361C974:56E8D1EF 

X-GitHub-Session-Id: 95581858 

X-GitHub-User: ouvens 

X-Request-ld: 14ee4ec4fc933b11d957c1233e17edc4 

X-Runtime: 8.157269 

X-Served-By: 3e68298776c691d4ed82ce5a8c891c6a 

X-UA-Compatible: IE=Edge,chrome=1 

X-XSS-Protection: 1; mode=block 


图 2-12 ” ”HTTPS 响应 头 部 内 容 


2.2.5 ”浏览 器 Web 安 全 控制 


除了 HTTPS 外 ，Web 前 端 浏览 器 设置 的 安全 性 的 控制 还 有 很 多 ， 
通过 某 些 特定 的 head 头 配置 ， 就 可 以 完成 浏览 器 端的 安全 性 设置 。 下 
面 我 们 再 来 看 几 个 典型 的 安全 消息 头 域 设 置 。 


X-XSS-Protection 


这 个 head 消 息 头 设置 主要 是 用 来 防止 浏览 器 中 的 反射 性 XSS 问 题 
的 发 生 ， 通 过 这 种 方式 可 以 在 浏览 器 层面 增加 前 端 网 页 的 安全 性 。 不 
过 目前 ， 只 有 较 高 版 本 的 Internet Explorer、Chrome 和 Safari (webkit) 
支持 这 个 消息 头 域 字段 设置 。X-XSS-Protection 通 常设 置 如 下 。 


X-XSS-Protection: 1; 
mode=block 0 -关闭 对 浏览 器 的 xss 防 护 ; 1 -开启 xss 防 护 
mode=block 可 以 开启 XSS 防 护 并 通知 浏览 器 阻止 而 不 是 过 滤 用 户 注入 的 XSS 脚 本 


Strict-Transport-Security 


Strict Transport Security (STS) 是 一 种 用 来 配置 浏览 器 和 服务 器 
之 间 安 全 通信 的 机 制 ， 主 要 用 来 防止 中 间 者 攻击 ， 因 为 它 强 制 所 有 的 
通信 都 使 用 HTTPS， 在 普通 的 HTTP 报 文 请 求 中 配置 STS 是 没有 作用 
的 ， 而 且 攻 击 者 也 能 更 改 这 些 值 。 为 了 防止 这 样 的 现象 发 生 ， 很 多 浏 
览 器 内 置 了 一 个 配置 STS 的 站 点 列表 ， 在 Chrome 浏 览 器 下 可 以 通过 访 
问 chrome://net-internals/#hsts 查 看 浏览 器 中 站 点 的 STS 列 表 ， 一 般 STS 
的 配置 实现 如 下 。 


max-age=31536000 -告诉 浏览 器 将 域名 缓存 到 STS 列 表 中 ， 只 有 这 些 特定 域名 下 的 
资源 内 容 才 允许 被 加 载 ， 时 

间 是 一 年 

max-age=31536000 ， 

includeSubDomains; 

preload; -告诉 浏览 器 将 域名 缓存 到 STS 列 表 里 面 并 且 包 含 所 有 的 子 域名 ， 并 可 支持 
预 加载 ， 时 间 是 一 年 

max-age= 9 -告诉 浏览 器 移 除 在 STS 缓 存 里 的 域名 ， 或 者 不 保存 当前 域名 


Content-Security-Policy 


我 们 简称 它 为 CSP， 这 是 一 种 由 开发 者 定义 的 安全 策略 性 声明 ， 
通过 CSP 所 约束 的 的 规则 设 定 ， 浏 览 器 只 可 以 加 载 指 定 可 信 的 域名 来 
源 的 内 容 (这 里 的 内 容 可 以 是 脚本 、 图 片 、iframe、font、style 等 等 远 
程 资源 ) 。 通 过 CSP 协 定 ，Web 只 能 加 载 措 定安 全 域名 下 的 资源 文 
件 ， 保 证 运行 时 的 内 容 总 处 于 一 个 安全 的 环境 中 。 


Content-Security-Policy:default-src base-uri 'self'， 
block-all-mixed-content; 

child-src 'self' render .githubusercontent.com; connect-src 
'self' uploads.github.com 

status.github.conm api.github.conm www.goo0gle-analytics,.conm 
github-cloud.s3.amazonaws.com 

wss://live.github.com; font-src assets-cdn.github.com; form- 
action 'self' github.com 

gist.github.com; frame-src 'self' 


render.githubusercontent.com; img-src ‘'self' data: 


assets-cdn.github.com identicons.github.com www.g00gle- 
analytics.com 

collector .githubapp.com * ,gravatar .com * ,WwWp.com 
*.githubusercontent .com; media-src 

none ' ; object-src assets-cdn.github.com; plugin-types 
application/x-shockwave-flash; 

script-src assets-cdn.github.com; style-src 'self' ‘'unsafe- 


inline' assets-cdn.github.conm 


上 面 的 代码 是 图 2-2 中 Content-Security-Policy 的 配置 内 容 ， 这 里 定 
义 了 较 多 的 设置 ， 其 中 block-all-mixed-content 就 是 之 前 提 到 的 ， 
HTTPS 请 求 的 HTML 会 控制 阻塞 外 部 HTTP 资 源 的 文件 加 载 。 


Access-Control-Allow-Origin 


Access-Control-Allow-Origin 是 从 Cross Origin Resource Sharing 
(CORS) 中 分 离 出 来 的 。 这 个 头 部 设置 是 决定 哪些 网 站 可 以 访问 当 
前 服务 器 资源 的 设置 ， 通 过 定义 一 个 通配符 或 域名 来 决定 是 单一 的 网 

站 还 是 所 有 网 站 可 以 访问 服务 器 的 资源 。 需 要 注意 的 是 ， 如 果 服 务 器 
端 定 义 了 通配符 “ 阔 *”， 那 么 服务 端的 Access-Control-Allow-Credentials 
(是 否 允 许 请 求 时 携带 验证 信息 ) 选项 就 无 效 了 ， 此 时 用 户 浏览 器 中 
的 不 同 域 Cookie 信 息 将 默认 不 会 在 服务 器 请 求 里 发 送 ( 即 如 果 需 要 实 
现 带 Cookie 进 行 跨 域 请 求 ， 则 要 明确 地 配置 允许 来 源 的 域 ， 使 用 任意 
域 的 配置 是 不 合法 的 ) 。 


Access-Control-Allow-Origin : * 通配符 允许 任何 远程 资源 来 访问 


Access-Control-Allow-Origin 


的 内 容 
http://www.domain.com - 只 允许 特定 站 点 才能 访问 当前 资源 


Access-Control-Allow-Origin 常 常 作为 跨 域 共享 设置 的 一 种 实现 
方式 ， 其 他 常用 的 跨 域 手段 还 有 : JSONP(JSON with Padding)、 
script 标 签 跨 域 、 window.postMessage、 修 改 document.domain 跨 子 
域 、window.name 跨 域 和 WebSocket 跨 域 等 。 


参考 资料 : 
https:/www.w3.0org/TR/2014/WD-CSP11-20140211/。 


http://www.html5rocks.com/en/tutorials/security/transport-layer- 


security/o 


2.3 ”前 端 实 时 协议 


在 实际 的 前 端 应 用 项 目 中 ， 除 了 使 用 应 答 模 式 的 HTTP 协 议 进 行 普 
通 网 络 资源 文件 的 请 求 加 载 外 ， 有 时 也 需要 建立 客户 端 (这 里 主要 指 
浏览 器 ) 与 服务 端 之 间 的 实时 连接 进行 通信 ， 例 如 网 页 实时 聊天 的 应 
用 场景 ， 这 融 必 须 涉及 浏览 器 端的 实时 通信 协议 了 。 对 于 这 些 对 实时 
性 要 求 较 高 的 应 用 场景 ， 普 通 的 HTTP (S) 协议 就 并 不 适用 。 虽 然 前 
端 可 以 通过 Ajax 定时 向 服务 端 轮 询 的 方式 来 持续 获取 服务 端的 消息 ， 
但 是 这 种 方式 效率 相对 较 低 ， 目 前 一 般 只 用 来 处 理 浏 te 
的 实时 场景 。 包 括 AJAX 的 方式 在 内 ， 目 前 可 用 来 在 前 端 浏览 器 上 进 


行 实时 通信 的 功能 实现 方式 主要 有 WebSocket、Poll、Long-poll 和 DDP 
协议 。 


2.3.1 WebSocket 通 信 机 制 


在 本 章 第 一 节 中 我 们 讲 过 ，HTTP 1.1 的 协议 支持 使 用 Upgrade 头 域 
设置 进行 协议 扩展 切换 ， 这 样 就 可 以 实现 从 HTTP 1.1 协 议 切换 到 其 他 
通信 协议 进行 通信 了 。 至 运 的 是 ， 现 在 所 有 的 浏览 器 基本 都 支持 HTTP 
1.1 协 议 ， 一 种 很 典型 的 实时 通信 协议 便 是 WebSocket，WebSocket 是 浏 
览 器 端 和 服务 器 端 建立 实时 连接 的 一 种 通信 协议 ， 可 以 在 服务 器 和 浏 
览 器 端 建立 类 似 Socket 方 式 的 消息 通信 ， 关 于 WebSocket 的 连接 过 程 可 
以 参考 图 2-4。 


相对 于 HTTP 1.1 协 议 ，WebSocket 协 议 的 优势 是 方便 服务 器 和 浏览 
器 之 间 的 双向 数据 实时 通信 。 但 我 们 要 明白 的 是 ，HTTP 2 也 支持 服务 
端的 消息 推送 ， 也 是 可 以 来 适应 这 一 场景 的 ， 不 过 这 是 未 来 的 事情 
了 。 先 简单 看 一 下 官方 WebSocket 协 议 中 数据 帧 的 定义 格式 。 


图 2-13 为 Websocket 官 方 参考 标准 的 消息 数据 帧 结构 。 
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图 2-13 ”Websocket 数 据 帧 结构 


FIN: 1 位 。 表 示 当 前 数据 帧 是 否 为 消息 的 最 后 一 帧 ， 一 个 报 文 消 
息 由 一 个 或 多 个 数据 帧 构成 ， 如果 消息 只 由 一 帧 构成 ， 那 么 起 始 帧 残 
是 结束 帧 。 


RSV1，RSV2，RSV3: 各 1 位 。 如 果 未 定义 扩展 ， 那 么 这 三 位 都 
是 0; 如 果 定 义 了 扩展 ， 则 为 非 0 值 ; 如 果 接 收 的 帧 此 处 非 0， 并 且 扩 展 
中 没有 该 值 的 定义 ， 那 么 关闭 连接 。 


OPCODE : 4 人 位。 表示 PayloadData 有 效 负 和 荷 ， 如 果 接 收 到 未 知 的 
OPCODE， 接 收 端 必须 关闭 连接 。 


o ”0x0 表示 附 加 数据 帧 ; 
o ” 0x1 表示 文本 数据 帧 ; 
o ”0x2 表 示 二 进 制 数 据 帧 ，; 


o 0x3-7 暂 时 无 定义 ， 为 以 后 的 非 控制 帧 保留 ; 

o 0x8 表 示 连 接 关 闭 ; 

o ”0x9 表示 ping; 

o ”0xA 表 示 pong，ping、pong 用 于 保持 客户 端 与 服务 器 之 间 的 心 
跳 连 接 ; 

o 0xB-F 暂 时 无 定义 ， 为 以 后 的 控制 帧 保留 。 


MASK: 1 位 。 用 于 标识 PayloadData 是 否 经 过 掩 码 处 理 。 如 果 是 
1，Masking-key 域 的 数据 即 是 掩 码 密 钥 ， 用 于 解码 PayloadDatao 


值得 注意 的 是 ，WebSocket 在 网 络 中 传输 的 最 小 单位 也 为 帧 ， 数 据 
的 传输 也 可 以 理解 为 流 式 的 传输 。 但 webSocket 目 前 在 项 目 中 使 用 时 仍 
然 存 在 一 些 兼容 性 问题 ， 它 还 不 支持 IE11 以 下 或 Android 4.4 版 本 以 下 
的 浏览 器 。 所 以 在 实际 项 目 中 ， 如 果 要 考虑 低 版 本 浏览 器 的 使 用 ， 我 
们 仍 要 考虑 其 他 的 实现 方式 。 


参考 资料 : https:/Wtools.ietf.org/htmlrfc6455。 


2.3.2 ”Poll 和 Long-poll 


尽管 HTML5 的 WebSocket 为 我 们 提供 了 实现 前 端 实 时 化 的 方案 ， 
提供 的 API 也 很 完备 。 但 不 季 的 是 ， 并 非 所 有 浏览 器 都 支持 WebSocket 


协议 ， 在 桌面 或 移动 端 浏览 器 应 用 开发 时 我 们 仍 不 能 放心 地 使 用 它 ， 
这 时 就 必须 回 到 现 有 的 HTTP 协 议 上 考虑 采用 Poll ( 轮 询 ) 和 Long-poll 
(长 轮 询 ) 的 方案 来 应 对 实时 通信 的 场景 了 


Poll 


Poll 方 案 很 容易 理解 ， 即 浏览 器 采用 定时 向 服务 器 发 送 请 求 轮 询 
的 方法 不 断 发 送 或 拉 取 消息 。 如 图 2-14 所 示 ， 浏 览 器 每 隔 一 秒 向 服务 
器 发 送 一 次 请 求 ， 在 一 秒 内 服务 器 更 新 的 内 容 在 下 一 次 轮 询 中 将 被 浏 
览 器 拉 取 返回 。 所 以 这 种 方案 相对 来 说 实时 性 较 差 ， 而 且 没有 新 消息 
时 依然 需要 不 断 轮 询 ， 比 较 消耗 系统 资源 。 


轮 询 1 


消息 返回 


轮 询 2 


消息 返 


轮 询 3 


图 2-14 ”poll 轮 询 实现 原理 


Long-poll 


HTTP 请 求 可 以 设置 一 个 较 长 的 Timeout 等 待 时 间 ， 这 样 网 络 轮 询 
请 求 就 可 以 维持 一 段 较 长 的 时 间 后 返回 结果 ， 这 也 就 是 Long-poll (长 
轮 询 ) 的 基本 思路 。 服 务 器 只 要 在 这 段 长 轮 询 时间 内 进行 响应 ， 请 求 
便 会 立即 返回 结果 ; 如 果 这 段 时 间 服 务 器 没有 返回 ， 浏 览 器 端 将 自动 
响应 超时 并 重新 发 起 一 个 长 轮 询 请 求 。 

如 图 2-15 所 示 ， 浏 览 器 模拟 发 起 轮 询 请 求 后 将 维持 一 段 时 间 ， 这 


段 时 间 内 只 要 有 服务 器 消息 返回 ， 则 返回 成 功 ， 随 之 立即 重新 发 送 一 
个 新 的 长 轮 询 等 待 服务 器 响应 。 


Server 


长 轮 询 1 


轮 询 返 回 


图 2-15 ”Long-poll 轮 询 实现 原理 


相 比 于 Poll，Long-poll 的 实现 更 加 节省 系统 资源 ， 实 时 性 更 好 ， 
不 用 持续 地 定时 发 送 网 络 请 求 。Long-poll 目 前 一 个 很 典型 的 应 用 场景 
就 是 网 站 通过 对 应 的 移动 客户 端 进行 扫描 二 维 码 登 录 ， 即 用 户 使 用 移 
动 客户 端 扫 描 二 维 码 登录 网 站 ， 成 功 后 桌面 浏览 器 页 面 自动 响应 跳 转 
进入 一 个 新 的 登录 后 页 面 。 


如 图 2-16 所 示 ， 用 户 打开 桌面 浏览 器 页 面 后 会 立即 发 送 一 个 用 户 
录 陆 状态 查询 的 长 轮 询 请 求 ， 同 时 开始 使 用 移动 客户 端 扫描 二 维 码 ， 


扫描 成 功 时 移动 客户 端 会 调用 接口 改变 用 户 的 登陆 状态 ， 此 时 服务 器 
可 以 不 断 轮 询 获 取 用 户 登录 状态 改变 通知 ， 一 旦 检测 到 用 户 使 用 移动 
客户 端 扫 码 登 录 ， 就 将 用 户 登录 状态 返回 给 浏览 器 的 长 轮 询 请 求 ， 用 
户 浏 览 器 请 求 到 用 户 登 录 状 态 后 完成 后 面 的 跳 转 ， 前 端 请 求 登录 状态 
的 轮 询 就 可 以 使 用 AJAX 来 模拟 实现 。 其 实 和 一 般 的 请 求 没 有 太 大 的 
差别 。 


桌面 浏览 器 消息 服务 器 移动 客户 端 


用 户 扫 码 登录 


消息 返回 


浏览 器 跳 转 


图 2-16 ”二 维 码 扫描 登录 跳 转 原理 


function _getQrAuth () { 


const self = this; 


// 请 求 查 询 登 录 态 

$.ajax({ 
url: '/api/vi/user/qrcode/auth', 
type: 'get', 


dataType: 'json', 


cache: false, 
timeout: 30 * 1000， // 设置 30 秒 超时 时 间 


success: function(data) { 


// 登录 成 功 后 自动 跳 转 
if (data.retcode === 200) { 
window.location.href = '/user_info.html? 
backUrl=" + 
encodeURIComponent (backUr1); 
} 
}, 


error: function(e) { 


console.1log(JSON.stringify(e)); 


}); 


在 Node.js 服 务 端 对 应 的 处 理 程序 可 以 用 如 下 方法 来 实现 登陆 态 的 
循环 查询 。 


const qrcodeAuth = function*(req, res) { 


let ctx = this,; 


let authState = false; 
while(true)t 
// 查询 用 户 登 录 仿 ， 已 登录 则 返回 用 户 信息 ， 否 则 返回 false 
authState = queryAuthState(ctx ) ; 


if(authSstate)t 
// 如 果 用 户 已 登录 ， 则 返回 成 功 结果 
ctx.body = { 


retcode: 200 


} 
return ， 
} 
} 
ctx.body = { 
retcode: 500, 
msg: 'time out' 
} 


}; 


Web 应 用 中 客户 端 和 服务 端 建立 实时 通信 的 方式 比较 多 ， 包 括 
HTML5 提 供 的 WebSocket 、 Flash 实 现 的 WebSocket 、 
XMLHttpRequest 轮 询 长 连接 、 XMLHttpRequest Multipart 
Streaming、 script 标 签 的 长 时 间 轮 询 等 。 不 常用 的 方式 暂 不 介绍 过 
多 ， 大 家 有 兴趣 可 以 自行 了 解 。 


2.3.3 ”前 端 DDP 协 议 


DDP (Distributed Data Protocol， 分 布 式 数据 协议 ) 是 一 种 新 型 的 
客户 端 与 服务 器 端的 实时 通信 协议 ， 由 于 兼容 性 的 原因 ， 目 前 使 用 还 


不 广泛 。DDP 使 用 JSON 的 数据 格式 在 客户 端 和 浏览 器 之 间 进 行 数 据 传 
输 通 信 ， 所 以 对 于 前 端 开发 者 来 说 使 用 非常 方便 。 有 名 的 Meteor Web 
框架 的 双向 实时 数据 更 新 机 制 底层 使 用 的 就 是 DDP， 这 种 协议 模式 下 
客户 端 可 向 服务 器 端 发 起 远程 过 程 调用 ， 客 户 端 也 可 以 订阅 服务 端 数 
据 ， 在 服务 端 数据 变化 时 ， 服 务 器 会 向 客户 端 发 起 通知 ， 触 发 浏览 
响应 的 操作 。 当 然 我 们 借助 DDP 模 块 也 可 以 创建 一 个 简单 的 DDP 协 议 
的 服务 。 


// 引入 DDP 模块 ,创建 客户 端 连接 器 

const DDPClient = require('ddp'); 

const client = new DDPClient({ 
host: 'localhost', 


port: 3000 
}); 


// 监听 消息 

client.on('message', function(data, flags) { 
console.1og('[DDP 消息 ]: '，data); 

}); 

// 连接 

client.connect(function() { 
// 客户 端 订阅 post 
client.subscribe('post', [], function() { 

console.1og('[post 订阅 消息 ] ' ) ， 

}); 

}); 


以 Meteor 为 例 ， 在 web 浏览 器 端 也 需要 引入 相应 的 协议 解析 处 理 
模块 来 完成 相应 的 通信 。 


<script src="./path/meteor-ddp.js"></script> 


需要 注意 的 是 ， 在 浏览 器 端 使 用 DPP 协 议 仍然 存在 部 分 兼容 性 问 
题 ， 所 以 目前 DDP 仍 没有 被 广泛 使 用 在 实际 项 目 中 ， 但 我 们 可 以 认为 
它 是 面向 未 来 的 一 种 前 端 实时 协议 ， 以 后 极 有 可 能 被 广泛 使 用 。 


2.4 ”RESTful 数 据 协 议 规 范 


REST (Representational State Transfer， 表 述 性 状态 转化 ) 并 不 是 
某 一 种 具体 的 协议 ， 而 是 定义 了 一 种 网 络 应 用 软件 之 间 的 架构 关系 并 
提出 了 一 套 与 之 对 应 的 网 络 之 间 交 互 调用 的 规则 。 与 之 类 似 的 例如 早 
期 的 WebSevice， 当 然 WebSevice 现 在 基本 都 不 用 了 。 而 在 REST 形 式 的 
软件 应 用 服务 (这 里 讨论 的 主要 是 Web 应 用 服务 ) 中 ， 每 个 资产 都 有 
一 个 与 之 对 应 的 URI 地 址 ， 资 源 本 身 都 是 方法 调用 的 目标 ， 方 法 列表 
对 所 有 资源 都 是 一 样 的 ， 而 且 这 些 方 法 都 推荐 使 用 HTTP 协 议 的 标准 方 
法 ， 例 如 GET、POST、PUT、DELETE 等 。 如 果 一 个 网 络 应 用 软件 的 
设计 是 按照 REST 定 义 的 ， 我 们 就 可 以 认为 它 使 用 的 交互 调用 的 方法 设 
计 遵 循 RESTful 规 范 。 


换 种 方式 理解 ，RESTful 是 一 种 软件 染 构 之 间 交 互 调用 数据 的 协 
议 风格 规范 ， 它 建议 以 一 种 通用 的 方式 来 定义 和 管理 数据 交互 调用 接 
口 。 为 了 方便 理解 ， 我 们 来 看 一 个 具体 场景 。 一 个 项 目 经 过 了 需求 阶 
段 和 评审 阶段 后 便 要 着 手 去 开发 了 ， 团 队 的 前 端 工程 师 和 后 台 工 程 师 
需要 商量 前 后 台 的 数据 协议 该 怎样 定义 。 例 如 ， 对 于 书籍 book 的 记录 


管理 接口 ， 有 增 、 删 、 改 、 查 操作 ， 于 是 我 们 用 path/addBook、 
path/deleteBook、path/updateBook、path/getBook 来 定义 接口 看 上 去 好 
像 没 有 什么 问题 。 后 来 ， 另 一 个 项 目 也 有 类 似 的 接口 定义 ， 却 可 能 叫 
作 path/appendBook、path/delBook、path/modifyBook、 path/getBook。 
接着 有 一 天 ， 项 目 负责 人 可 能 会 说 ， 要 升级 接口 来 满足 新 的 需求 ， 于 
是 我 们 又 添加 了 path/addBook2、path/deleteBook2、path/updateBook2、 
path/getBook2。 这 样 用 起 来 是 没有 什么 问题 ， 但 是 这 些 随意 的 定义 会 
增加 数据 接口 维护 难度 和 项 目 继续 开发 的 成 本 。 


或 许 对 于 你 来 说 ， 使 用 add、append 或 后 面 添加 add1、add2、add3 
都 没有 问题 ， 但 是 如 果 想 将 项 目 转 给 其 他 人 继续 维护 ， 请 尽量 不 要 这 
样 做 ， 因 为 这 样 的 数据 交互 协议 的 制定 比较 乱 ， 没 有 统一 的 规范 会 很 
难 管理 。 


这 时 ， 我 们 或 许 会 考虑 使 用 文档 或 规范 ， 规 定 一 定 要 使 用 add 来 添 
加 ， 新 的 接口 版 本 号 放 前 面 path/v2/addBook， 开 发 的 人 必须 严格 按照 
文档 规范 去 写 。 这 样 做 很 好 ， 但 依然 不 够 完善 ， 原 因 有 以 下 几 点 : 一 
是 因为 项 目 工作 单单 排 期 紧张 ， 你 可 能 没 时 间 去 与 文档 ， 或 者 后 面 接 
手 的 人 不 想 去 看 文档 ; 二 是 开发 修改 功能 后 很 可 能 来 不 及 或 忘记 去 更 
新 文档 ; 三 是 无 论文 档 写 得 多 清楚 ， 我 们 看 起 来 效率 总 是 很 低 。 这 时 
如 果 有 一 个 风格 更 好 的 通用 规范 来 定义 数据 交互 接口 ， 就 不 用 这 么 麻 
烦 了 。 


所 以 我 们 完全 可 以 利用 RESTful 设 计 的 规范 特性 来 解决 上 面 遇 到 
的 问题 。 对 于 书籍 记录 操作 接口 的 命名 可 以 如 下 操作 。 


如 表 2-1 所 示 ， 使 用 RESTful 规 范 来 重新 设计 接口 后 ， 一 切 就 变 得 
很 清晰 自然 ， 这 样 新 的 工程 师 接手 项 目 时 ， 只 要 他 足够 了 解 RESTful 


规范 ， 则 几乎 没有 时 间 成 本 。 即 使 他 不 了 解 RESTful 规 泌 ， 也 可 以 很 
快 地 去 了 解 ， 这 就 可 以 避免 他 去 读 那 份 看 似 完善 其 实 宛 长 杂 的 文档 。 


表 2-1 RESTful 风 格 接口 定义 


Farineree 


POST path/v1/book| 新 增 书籍 信息 ， 例 如 添加 新 书籍 


删除 书籍 信息 ， 例 如 移 除 下 架 某 本 书籍 的 信 

DELETE 0 
全 量 更 新 书籍 信息 ， 例 如 修改 某 本 书籍 的 信 

| 


DISPATCH |path/v1/book a 
GET path/v1/book| 获 取 书 籍 信息 


所 以 ， 我 们 开发 时 就 可 以 这 样 来 定义 Web 端 接口 路 由 了 ， 对 于 前 
百 端 端 交 互 上 a 需要 引用 资 究 源 URI 即 可。 


const bookApi = require('../controller/book'); 
const router = require('koa-router')(); 


let bookUri = '/path/vi/book'; 


// 书籍 相关 Api 

router .post(bookUri, bookApi.addBook); // 添加 书籍 记录 
router ,get(bookUri, bookApi,selectBook);  // 查询 书籍 记录 
router ,delete(bookUri，bookApi,deleteBook);， // 删除 书籍 记录 
router,put(bookUri，bookApi,updateBook);  // 修改 书籍 记录 


module.exports = router; 


如 果 按 照 这 个 格式 来 定义 接口 ， 未 来 即使 接口 内 容 需 要 升级 也 会 
得 很 简单 ， 只 需要 修改 bookUri 的 路 径 就 可 以 了 。 


/人 


如 表 2-2 所 示 ， 我 们 可 以 使 用 某 一 级 路 径 来 清晰 地 标识 接口 的 版 本 
号 ， 当 然 更 加 标准 的 RESTful 定 义 方式 可 能 是 将 版 本 号 写 在 HTTP 请 求 
头 信息 的 Accept 字 段 中 进行 区 分 。 但 其 实 这 样 会 给 我 们 的 开发 带 来 一 
些 麻 烦 ， 例 如 不 能 在 开发 阶段 直观 地 看 出 这 个 接口 是 针对 哪个 版 本 功 
能 逻辑 的 描述 ， 必 须 打开 请 求 的 头 部 才能 得 到 接口 版 本 ， 因 此 推荐 使 
用 某 一 级 路 径 来 清晰 地 标识 接口 的 版 本 号 信息 ， 尽 管 这 和 规范 在 一 定 
程度 上 是 相 背 离 的 。 


表 2-2 RESTful 风 格 升级 版 本 接口 定义 


uri 


GET path/v2/book| 获 取 书 籍 信息 


RESTful API 的 主要 设计 原则 就 是 这 些 ， 总 结 来 说 就 是 结合 HTTP 
的 固有 方式 来 表征 资源 的 状态 变化 描述 ， 而 不 是 通过 动词 加 名 词 的 方 
式 来 设计 。 这 种 定义 风格 可 以 让 数据 交互 的 方式 更 加 规范 化 ， 一 定 程 
度 上 有 利于 降低 项 目 开 发 和 维护 的 成 本 。 


2.5 ”与 Native 交 互 协议 


移动 互联 网 兴起 后 ， 智 能 移动 设备 出 现 ， 移 动 端 Native 开 发 (我 
们 现在 一 般 将 移动 端 原生 应 用 的 开发 称 为 移动 端 Native 开 发 ) 几乎 一 
夜 之 间 盛 行 起 来 ， 并 很 快 得 到 第 一 批 掘 金 者 的 追捧 。 相 比 于 之 前 Wap 
Web (可 以 理解 为 移动 互联 网 兴起 前 手机 端的 网 页 应 用 ) 应 用 的 简单 
网 页 开发 ，Native App 以 更 优 的 性 能 、 更 好 的 用 户 体验 以 及 Google、 
Apple 平 台 厂 商 对 开发 者 的 共 赢 支持 引领 了 移动 互联 网 时 代 智 能 应 用 软 
件 开发 的 第 一 波浪 潮 。 随 之 而 来 的 就 是 HTML5 的 出 现 ， 它 允许 开发 者 
在 移动 设备 上 快速 开发 网 页 端 应 用 ， 也 可 以 将 Web 页 面 佣 入 到 Native 应 
用 中 ， 它 的 到 来 让 移动 互联 网 应 用 开发 很 快 进入 到 了 Native App、Web 
App、Hybrid App 并 存 的 时 代 。 随 着 移动 互联 网 第 一 波浪 潮 渐 渐 过 去 ， 
Hybrid App 结 合 了 Native App 和 Web App 的 优势 ， 在 牺牲 一 小 部 分 性 能 
的 前 提 下 ， 适 应 了 更 多 的 移动 应 用 开发 场景 ， 成 为 目前 广 为 使 用 的 移 
动 端 开发 模式 。 当 然 Native App 和 Web App 今 天 也 依然 有 它们 各 自 适用 
的 应 用 场景 。 基 于 这 个 背景 我 们 来 具体 看 看 Hybrid App 中 与 前 端 相关 
的 协议 与 应 用 。 


2.5.1 Hybrid App 应 用 概述 


Hybrid App 是 在 Native App 应 用 的 基础 上 结合 了 Web App 应 用 所 形 
成 的 模式 ， 我 们 称 之 为 混合 App。 从 技术 开发 上 来 看 ， 相 比 于 传统 的 
桌面 浏览 器 端的 web App， 它 具有 以 下 几 方 面 明显 的 特征 。 


o Hybrid App 可 用 的 系统 网 络 资产 更 少 。 由 于 移动 设备 CPU、 内 
存 、 网 卡 、 网 络 连 接 多 方面 的 限制 ，Hybrid App 的 前 端 页 面 
可 用 的 系统 资源 远 远 小 于 桌面 浏览 器 。 就 网 络 连 接 来 说 ， 大 
部 分 移动 设备 的 使 用 者 使 用 的 仍 是 3G、4G 甚 至 2G 的 网 络 ， 
带宽 和 流量 均 有 限制 ， 和 桌面 浏览 器 的 带宽 接 入 相 比 还 是 有 
着 本 质 上 的 区 别 。 


o 支持 更 新 的 浏览 器 特性 。 我 们 知道 目前 智能 设备 浏览 器 种 类 
相对 较 少 ， 且 随 着 硬件 设备 的 快速 更 新 ， 主 流 的 浏览 器 以 
WebKit 内 核 居多 ， 支 持 较 新 的 浏览 器 特性 。 不 像 桌面 浏览 
那样 需要 考虑 较 低 版 本 Internet Explorer 的 兼容 性 问题 。 


o 可 实现 离线 应 用 。Hyhrid 的 一 个 优势 是 可 以 通过 新 的 浏览 器 特 
性 或 Native 的 文件 读 取 机 制 进 行文 件 级 的 文件 缓存 和 离线 更 
新 。 这 是 桌面 浏览 器 上 较 难 做 到 的 。 这 些 离线 机 制 常常 可 以 
用 来 弥补 Hybrid App 网 络 系统 资源 不 足 的 缺点 ， 让 浏览 器 脚 
本 更 快 从 本 地 缓存 中 加 载 。 


o ， 较 多 的 机 型 考虑 。 由 于 目前 移动 设备 平台 的 不 统一 性 ， 而 且 
不 同 设备 机 型 系统 的 浏览 器 实现 仍 有 一 定 的 区 别 ， 因 此 
Hybrid App 应 用 仍 需要 考虑 不 同 设备 机 型 的 兼容 性 问题 。 


o 支持 与 Native 交 互 。Hybrid App 的 另 一 个 特点 是 结合 了 移动 端 
Native 特 性 ， 可 以 在 前 端 页 面 中 调用 客户 端 Native 的 能 力 ， 例 


如 摄像 头 、 定 位 、 传 感 器 、 本 地 文件 访问 等 。 而 这 些 也 是 我 
们 在 本 节 中 要 关注 的 内 容 。 


所 以 在 实际 的 Hybrid App 项 目 开发 中 尤其 需要 注意 上 述 问题 ， 针 
对 这 些 问题 ， 我 们 需要 做 好 交互 、 优 化 和 兼容 性 的 工作 。 其 中 前 端 与 
Native 的 交互 是 目前 Hybrid 应 用 实现 过 程 中 非常 重要 的 一 个 环节 ， 也 是 
设计 实践 过 程 中 比较 复杂 的 一 个 部 分 。 本 节 中 ， 我 们 先 来 了 解 Hybrid 
App 中 前 端 与 Native 交 互 方面 的 知识 ， 看 看 Hybrid App 与 Native 之 间 的 
交互 协议 的 具体 内 容 。 


2.5.2 ”Web 到 Native 协 议 调 用 


在 HIML5 中 调用 Native 程 序 一 般 有 两 种 较 通 用 的 方法 ， 下 面 逐 一 
来 看 。 


通过 URI 请 求 


首先 来 看 一 下 Hybrid App 中 如 何 通 过 URI 请 求 在 HTML5 前 端 页 面 
中 来 调用 一 个 Native 的 方法 或 界面 。 其 主要 原理 是 ，Native 应 用 可 在 移 
动 端 系统 中 注册 一 个 Scheme 协议 的 URI， 这 个 URI 可 在 系统 的 任意 地 
方 授权 访问 来 调 起 一 段 原生 方法 或 一 个 原生 的 界面 。 同 样 ，Native 的 
WebView 控 件 中 的 JavaScript 脚 本 的 请 求 也 可 以 匹配 调用 这 一 通用 的 
Scheme 协议 。 例 如 我 们 通过 对 window.location.href 赋 值 或 使 用 iframe 的 
方式 发 送 一 个 URI 的 请 求 ， 这 个 请 求 可 以 被 Native 应 用 的 系统 捕获 并 调 
起 Native 应 用 注册 匹配 的 这 个 Scheme 协议 内 容 。 代 码 如 下 。 


let iframe = document.createElement('iframe') ， 
iframe.setAttribute('style' , 'display:none') ， 
document .body.appendcChild(iframe) ，; 


iframe.setAttribute('src' , 'myApp://className/method?args') ，; 


如 图 2-17 所 示 ， 一 般 Native 应 用 会 提前 向 移动 端 系统 注册 Scheme 
协议 ， 之 后 前 闯 脚 本 发 送 iframe 中 的 URI 资 源 请 求 时 ，WebView 会 将 获 
取 URI 资 源 的 地 址 交 给 Native App，Native App 将 请 求 转发 给 系统 并 进 
行 解析 。 此 时 如 果 你 的 Native 应 用 注册 了 与 之 匹配 的 Scheme URI 到 系 
统 ， 系 统 就 会 通过 此 URI 地 址 执行 该 Scheme 协议 定义 的 Native 操 作 ， 
执行 一 段 Native 代 码 或 者 拉 起 App 的 某 个 界面 《例如 打开 摄像 头 、 打 开 
移动 App 首 页 等 ) 。 这 样 就 完成 了 HTML5 中 JavaScript 对 Native 的 调 
用 。 


注册 Scheme 协议 


iframe 请 求 调用 
捕获 请 求 并 提交 系统 
啊 应 Scheme 协议 


自 调用 Native 页 面 


图 2-17 ” Scheme 协议 注册 调用 过 程 
通过 addJavascriptInterface 注 入 方法 到 页 面 中 调用 


除了 使 用 URI 方 式 调 用 Native 注 册 的 Scheme 协 议 以 外 ， 还 可 以 通 
过 addJavascriptInterface 方 法 将 Native 的 一 个 对 象 方法 注入 到 页 面 中 ， 
供 JavaScript 调 用 。 这 里 就 以 一 个 Android 平 台 的 例子 来 看 下 具体 是 如 何 
使 用 的 。 


// 声明 webSettings 的 实例 
WebSettings webSettings = webView.getSettings(); 
// 设置 webView 内 可 执行 JavaScript 脚本 
webSettings.setJavascriptEnabled(true); 
// 加 载 页 面 到 WebView 中 
webView.1loadUr1l("file:///android_ asset/index.html"); 
// 添加 native 类 实例 注入 到 webView 中 
webView.addJavascriptInterface(new JSsInterface()， "native"); 
public class JsInterface { 

Q@JavascriptInterface 

public void showToast(String toast ) { 

Toast .makeText(MainActivity,this， toast, 


Toast .LENGTH_SHORT) .show( ); 
} 


这 里 ，Native 会 向 webView 的 全 局 作用 域 中 注入 一 个 native 的 全 局 
对 象 ， 并 且 native 对 象 中 具有 showToast 方 法 ， 而 这 个 方法 是 可 以 通过 
前 端 页 面 中 JavaScript 调 用 的 。 对 应 的 HTML5 页 面 则 可 以 按 如 下 方式 编 
与 5 


<!-- index.html --> 
<IDOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 


<title>demo</title> 


</head> 
<body> 
<script> 


nativeAlert('hello ouven'); 


// 这 里 就 可 以 调用 native 实例 对 象 的 showToast 方法 了 
function nativeAlert(msg)t 
native.showToast(msg); 
} 
</script> 
</body> 
</html> 


通过 向 WebView 的 全 局 作用 域 注 入 native 对 象 的 方法 ，WebView 中 
页 面 的 window 对 象 就 可 以 直接 通过 前 端的 native.showToast 方 法 调用 
Native 应 用 中 JsInterface 的 动作 了 。 当 然 这 里 是 个 很 简单 的 实例 ， 它 的 
主要 实现 原理 是 通过 addJavascriptInterface 将 Java 的 实例 对 象 注 入 到 
WebView 中 ， 让 WebView 中 的 页 面 JavaScript 可 以 直接 使 用 ， 采 用 这 种 
方法 也 可 以 实现 更 加 复杂 的 调用 功能 。 


2.5.3 ”Native 到 Web 协 议 调用 


相反 ， 如 果 Native 需 要 主动 调用 HTML5 页 面 中 JavaScript 方 法 或 指 
令 ， 又 该 怎么 做 呢 ? 同样 地 ， 也 需要 先 使 用 JavaScript 在 HIML5 页 面 全 
局 中 声明 相对 应 的 方法 ， 这 就 有 点 类 似 于 Native 注 册 的 Scheme 协议 。 
其 中 ，Native 向 HTML5 发 起 的 调用 是 通过 loadUrl 方 法 (Android 平 台 下 


面 方法 名 为 loadur ， iOS 系统 下 通常 为 
stringByEvaluatingJavaScriptFromString ) 实现 的 ， 例 如 使 用 
webView.loadUrl("javascript: alert('hello ouven) ") ; 则 可 以 执行 HIML5 
页 面 的 alert 方 法 。 再 来 看 一 个 稍微 复杂 一 点 的 例子 。 


// 声明 webSettings 的 实例 

WebSettings webSettings = webView.getSettings(); 

// 设置 WebView 内 可 执行 JavaScript 脚本 
webSettings.setJavascriptEnabled(true); 

// 加 载 页面 带 WebView 中 
webView.1loadUr1l("file:///android _ asset/index.html"); 
// 声明 JsInterface 实例 

JSInterface jsInterface = new JsInterface(); 


jsIinterface.1log('hello ouven'); 
public class JsInterface { 


public void log(final String msg)t{ 
webView.post(new Runnable() { 
Q@Override 
public void run() { 
// 1og 是 js 的 1og 方法 
webView.1loadUrl("javascript: log(" + "'" + msg 
A 
} 
}); 


这 段 Java 代 码 中 ，Native 和 希望 通过 创建 一 个 新 线程 来 执行 页 面 
JavaScript 的 log 0 方法 ， 相 对 应 的 HTML5 页 面 可 按 如 下 方式 实现 在 全 
局 作用 域 声 明 一 个 log() 方 法 供 Native 调 用 。 


<!-- index.html --> 
<IDOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>demo</title> 
</head> 
<body> 
<script> 
// 在 页 面 中 声明 方法 
function log(msg)t 
console.1log(msg); 
} 
</script> 
</body> 
</html> 


采用 这 种 方法 便 可 以 实现 在 Native 中 调用 JsInterface 实 例 中 的 log() 
方法 时 控制 WebView 在 页 面 中 打印 信息 。 相 信 对 大 家 来 说 应 该 很 容易 
理解 。 


总 结 来 看 ， 这 里 实现 交互 的 核心 方法 其 实 都 可 以 认为 是 通过 方法 
注入 来 实现 的 ，Native 应 用 将 协议 注入 到 系统 Scheme， 或 将 Native 方 法 
直接 注入 到 页 面 的 全 局 变量 ， 反 之 也 可 以 在 HIML5 页 面 全 局 作用 域 中 
添加 方法 ， 让 Native App 调 用 。 这 样 就 完成 了 前 端 与 Native App 的 相互 
调用 。 


2.5.4 JSBridge 设 计 规 范 


了 解 Android 的 人 应 该 知道 ， 使 用 addJavaScriptInterface 在 Android 
4.2 以 下 版 本 会 有 一 些 安全 漏洞 。 例 如 ， 通 过 JavaScript 可 以 访问 当前 设 
备 SD 卡 上 面 的 任何 内 容 ， 甚 至 是 联系 人 信息 、 短 信 等 。 虽 然 Android 
4.2 以 上 的 版 本 可 以 通过 添加 @JavascriptInterface 的 方法 来 解决 安全 隐 
患 ， 但 是 对 于 Android 4.2 以 下 的 版 本 就 得 考虑 其 他 的 实现 方式 了 。 笠 
运 的 是 ， 在 Android 上 ，JavaScript 还 可 以 通过 另 一 种 
setWebChromeClient 方 法 来 实现 : JavaScript 在 执行 WebView 中 
JavaScript 的 alert() 或 prompt() 方 法 时 ，Native 端 会 自动 触发 onJsAlert 或 
onJsPrompt 的 方法 回调 函数 ， 一 般 情 况 下 ， 因 为 前 端 需要 常常 使 用 
alert() 方 法 ， 因 此 通过 重 写 Native 中 的 onJsPrompt 方 法 ，JavaScript 就 可 
以 通过 执行 prompt0) 方 法 把 数据 内 容 传递 到 Java 代 码 中 执行 ， 即 
JavaScript 在 执行 prompt() 方 法 时 将 数据 传 入 到 Native 的 onJsPrompt 方 法 
中 ， 而 onJsPrompt 里 则 是 我 们 重 写 的 调用 Native 程 序 代 码 。 


// 设置 prompt 监听 
webView.setwebChromeClient(new WebChromeClient() { 
Q@Override 


public boolean onJsPrompt (WebView view, String url, String 


message, String defaultValue, 
JsPromptResult result) { 

result.confirm(JSBridge.callJsPpPrompt (MainActivity.this, 
view, message)); 


return true,; 


}); 


同时 Java 也 可 以 主动 通过 loadUrlO 再 次 回调 JavaScript 的 方法 返回 
内 容 到 WebView 中 。 具 体 需 要 JavaScript 将 Native 调 用 所 需要 方法 的 名 
称 、 参 数 和 Native 执 行 完成 后 回调 JavaScript 的 方法 名 称 等 信息 都 传 给 


Nativeo 


以 Android 为 例 ， 目 前 使 用 较 多 的 解决 方案 是 通过 一 个 协议 串 定义 
Native 和 JavaScript 间 的 数 据 了 信 规 则 
jsbridge:// A ete eee sonObj， 当 然 不 一 定 

需要 这 样 的 定义 ， 也 可 以 使 用 其 他 的 方式 ， 这 只 是 一 种 方法 。 无 论 如 
何 ， 这 个 协议 串 必 须 包 括 以 下 内 容 : 调用 Native App 的 特定 标识 头 、 
类 名 称 、 方 法 名 、 参 数 、 回 调 JavaScript 的 方法 。 这 里 ，jsbridge 是 
Native 注册 的 协议 头 ，className 对 应 的 是 调用 Native 的 类 ， 
methodName 是 指 调 用 Native 类 中 有 具体 哪个 方法 ，jsonObj 则 是 指 
JavaScript 调 用 Native 方 法 时 传 入 的 参数 ，callbackMethod 为 回调 
JavaScript 的 方法 名 称 ， 目 的 是 在 JavaScript 调 用 Native 的 方法 成 功 后 异 
步 通 过 loadUrl ('javascript: callbackMethod() ') 来 让 JavaScript 继 续 进 行 
操作 。 


如 图 2-18 所 示 ， 以 Android 为 例 ， 我 们 需要 在 前 端 调 用 Native 层 Util 
类 的 toString 方 法 ， 传 入 参 数 为 msg， 调用 成 功 后 执行 前 端 JavaScript 的 


Success 方法 ， 传 入 的 协议 地 址 代码 如 下 。 


Jsbridge://Util:success/toString?{"msg":"hello ouven"} 


使 用 prompt 传 入 协议 串 : 
jsbridge://Util:success/toString?{’msg”:“hello 
ouven”} 


执行 Util. toString() 


执行 回调 : loadUrl( javascript: success()’) 


图 2-18 JSBridge 协 议 调 用 方式 


这 时 ，Native 应 用 就 需要 实现 Util 类 的 toString 方 法 了 。 当 Native 应 
用 接收 到 jsbridge://Util:success/toString?{"msg": "hello ouven"} 协 议 串 时 
便 调 用 UtiltoString0 方 法 ， 完 成 后 还 要 调用 loadUrl ('javascript: 
success() ') 方法 执行 前 端的 回调 。 


声明 注册 较 多 的 类 和 方法 需要 花费 较 多 的 精力 而 且 较 难 管理 ， 所 
以 我 们 通常 希望 可 以 在 WebView 端 使 用 一 个 通用 注册 接口 来 注册 我 们 
可 能 需要 使 用 到 的 所 有 类 和 方法 ,例如 JSBridge.register("jsName"，, 


javaClass.class)， 注 册 完 成 后 通过 某 个 JavaScript 全 局 对 象 来 管理 查看 ， 
以 供 Native 端 使 用 loadUrl 0 方法 来 调用 。 


JSBridge.call = function(className, methodName, params, 
callback) { 
let bridgeSstring; 


let paramsString = JSON.stringify(params || {€}); 


// 拼接 协议 串 
if (className && methodName ) { 
bridgeString = “jsbridge://${className}:${callback} 
/${methodName}?${ paramsString }，; 
try { 
// 将 协议 串 发 送 给 Native 应 用 
sendToNative(bridgeString); 
} catch (e) { 
console.1log(e); 
} 
} else { 


console.1log('Invalid className or methodName ' ) ; 


} 
// 发 送 协议 串 到 Native 
function sendToNative(uri, data) { 


window.prompt(uri, JSON.stringify(data || {€})); 


此 处 ，JavaScript 执行 时 也 使 用 类 似 上 面 的 JSBridge.call 
(className，methodName, params，callback) 来 调用 对 应 的 方法 。 
JSBridge.call0) 方 法 做 的 事情 很 简单 ， 将 传 入 的 参数 组 装 成 上 述 
jsbridge://className:callbackMethod/methodName?jsonObj 的 形式 ， 然 后 
调用 prompt (iOS 一 般 用 iframe，Android 建 议 使 用 window.prompt) 的 
方法 将 协议 串 传递 到 Native 应 用 层 解析 执行 ， 这 时 候 Native 层 会 收 到 这 
个 协议 串 ， 再 进一步 解析 并 调用 对 应 的 类 和 方法 名 称 ， 调 用 方法 成 功 
后 执行 WebView 中 声明 的 callbackMethod0 函 数 ， 这 样 整个 交互 协议 调 
用 的 过 程 就 完成 了 。 通 过 这 种 方式 ， 我 们 就 定义 了 前 端 与 Native 的 相 
互 调用 协议 。 


2.6 ”本 章 小 结 


本 章 主 要 为 大 家 介绍 了 与 前 端 相关 的 协议 ， 包 括 HTTP 1.x、HTTP 
2、HTTPS、 安 全 协议 、WebSocket、Poll、Long-poll、RESTful 协 议 规 
范 以 及 在 Hybrid 应 用 中 前 端 与 Native 交 互 协 议 的 设计 。 下 一 章 中 ， 我 们 
将 正式 探讨 Web 相 关 的 前 端 技 术 ， 主 要 从 前 端 三 层 结 构 及 其 演进 发 展 
来 展开 介绍 ， 让 大 家 对 前 端 基础 技术 的 发 展 有 系统 的 把 握 。 


第 3 章 ”前 端 三 层 结 构 与 应 用 


相信 大 家 已 经 了 解 了 前 端的 三 个 基本 构成 : 结构 层 HTML、 表现 层 
CSS 和 行为 层 JavaScript。 


结构 层 HTML 现 在 已 经 发 展 到 HTML5 版 本 ， 而 在 实际 工程 项 目 
中 ，HTML5 一 般 只 有 在 移动 端 页 面 开 发 中 才 会 使 用 到 ， 桌 面 浏览 器 页 
面 开发 时 由 于 兼容 性 原因 ， 使 用 的 虽然 是 HTML5 的 doctype 定 义 但 一 般 
不 使 用 HTML5 的 新 标签 规范 。 盏 运 的 是 ，HTML5 标 准 是 向 后 兼容 的 ， 
HTML4 版 本 的 绝 大 部 分 常用 标签 依然 可 以 继续 使 用 。 


对 于 表现 层 CSS， 我 们 从 CSS2 开 始 了 解 就 可 以 了 。 目 前 CSS3 已 经 
成 熟 ， 同 样 在 移动 端 浏览 器 开发 时 使 用 ， 不 过 桌面 浏览 器 开发 时 也 会 
使 用 已 支持 的 部 分 CSS3 属 性 。 另 外 ，CSS4 的 草案 正在 制定 当中 ， 但 距 
离 发 布 仍 有 一 段 时 间 。 


JavaScript 标 准 也 在 ECMAScript 5 发 布 后 经 历 了 几 年 的 波折 才 确 定 
发 布 了 新 版 本 。ECMAScript 6 于 2015 年 6 月 17 日 发 布 ， ECMAScript 7 标 
准 也 于 2016 年 完成 发 布 ， 目 前 ECMAScript 6+ ( 泛 指 ECMAScript 6 及 以 
上 版 本 ) 已 经 成 为 新 的 JavaScript 标 准 规范 正在 被 广泛 使 用 。 同 时 ， 这 
一 标准 的 确定 也 让 现代 前 端的 三 层 结 构 有 了 更 加 明确 的 新 定义 。 


此 外 我 们 也 需要 了 解 的 是 ， 前 端 三 层 结构 是 基础 。 现 代 的 Web 前 端 
应 用 开发 早已 经 不 是 简单 的 三 层 结 构 就 能 轻松 解决 的 了 ， 而 是 已 经 形 
成 了 编译 流程 化 、 生 产 环境 基础 优化 结构 运行 的 模式 。 简 单 来 讲 ， 例 


如 HIML 开发 可 以 由 Component (实现 的 形式 较 多 ， 例 如 Web 
Component、 目 录 级 Component、 其 他 框架 自 定义 形式 的 Component) 
来 管理 结构 ，CSS 由 SASS、postCSS、stylus 等 预 处 理 器 的 语法 开发 来 
代替 ，JavaScript 则 使 用 ECMAScript 6+、TypeScript 等 特性 标准 进行 高 
效 开 发 。 这 些 就 是 目前 主要 的 前 端 开发 技术 ， 其 主要 过 程 是 开发 完成 
i 管理 的 三 层 结 构 内 容 编译 输出 为 浏览 器 支持 运行 的 基础 
结构 解释 执行 。 为 什么 会 有 这 么 多 复杂 的 东西 出 现 呢 ? 主要 是 对 
0 通过 更 高 效 的 工具 来 快速 开发 和 管理 复杂 的 应 用 项 目 ， 
最 后 编译 为 基础 结构 运行 是 因为 仍然 有 旧 的 浏览 器 需要 兼容 。 如 果 某 
一 天 所 有 浏览 器 都 直接 支持 Component、ECMAScript 6+、SASS 等 ， 那 
就 进入 了 浏览 器 直接 解释 运行 的 时 代 ， 不 需要 自己 再 转译 了 。 


目前 端 技术 诞生 以 来 ， 融 一 直 保 持 着 较 快 的 发 展 速度 。 同 时 ， 前 
端 技术 的 快速 发 展 对 前 端 工程 师 的 要 求 也 越 来 越 高 。 无 论 怎样 ， 因 为 
对 效率 需求 授 切 ， 现 代 前 端的 编译 开发 技术 已 经 成 为 了 主流 。 这 一 
章 ， 我 们 将 重点 来 学 习 现 代 前 端 三 层 结构 的 演进 历程 以 及 如 何在 三 层 
结构 的 基础 之 上 进行 高 效 开 发 。 


3.1 _ HTML 结构 层 基础 
3.1.1 ”必须 要 知道 的 DOCTYPE 


提 到 DOCTYPE， 我 们 不 妨 先 从 HTML 4.01 开 始 讲 起 。HTML 4.01 
是 W3C 在 1999 年 制定 发 布 的 HTML 语 言 规范 。 要 知道 的 是 ，HTML4.01 
是 基于 SGML (Standard Generalized Markup language， 标 准 通 用 标记 语 
言 ) 规范 来 制定 的 。HTML5 正 式 发 布 于 2014 年 ，HTML5 不 是 基于 


SGML 演 化 而 来 的 ， 可 以 理解 为 是 wW3C 的 另 一 套 实现 规范 。HTML5 向 
后 兼容 了 绝 大 多 数 低 版 本 的 HTML 元 素 标签 ， 并 添加 了 新 的 元 素 标签 ， 


例如 <header>、<nav>、<footer>、<section>、<video>、<audio> 等 。 


另外 ， 虽 然 目 前 几乎 所 有 浏览 器 均 支 持 以 HTML5 的 方式 声明 文档 
类 型 ， 即 <!IDOCTYPE html> ， 但 并 不 代表 HTML5 的 新 标签 元 素 就 可 以 
在 这 些 浏览 器 上 正常 解析 ， 这 是 因为 DOCTYPE 声 明 只 用 于 指示 Web 浏 
览 器 页 面 使 用 哪个 HTML 版 本 编写 的 指令 进行 解析 ，<!IDOCTYPE 
html> 的 定义 兼容 所 有 HTML 的 历史 版 本 和 最 新 的 HTML5 版 本 ， 不 支持 
HTML5 中 的 DOCTYPE 定 义 的 浏览 器 仍然 会 使 用 HTML 4.01 等 历史 版 本 
的 兼容 模式 来 进行 文档 解析 。 


SGML 的 规范 很 多 ， 所 以 我 们 以 前 使 用 HTML 开 发 页 面 时 需要 对 
文档 类 型 定义 (Document Type Difinition ，DTD) 进 行 声 明 ， 即 在 
DOCTYPE 后 面 声明 DTD 的 定义 ， 不 同 的 文档 DTD 会 指示 浏览 器 以 不 
同 的 文档 模式 来 解析 HTML 文本 。 如 果 DOCTYPE 不 存在 或 格式 不 正 
确 ， 则 会 导致 文档 以 兼容 模式 呈现 ， 这 时 浏览 器 会 使 用 较 低 的 浏览 
器 标准 模式 来 解析 整个 HTML 文 本 。 如 果 定 义 了 标准 模式 运行 ， 例 如 
<IDOCTYPE html PUBLIC"/W3C/DTID XHIML 1.1/EN" 
"http:/www.w3.org/TR/xhtml1l1/DTD/xhtml1l1.dtd"> 或 <!IDOCTYPE 
HTML PUBLIC"-/W3C/DTD HTML 4.01/EN" 
"http:/www.w3.0rg/TR/html4/strict.dtd">， 那 么 这 有 轩 浏 览 订 DOM 演 梁 
和 JavaScript 的 运作 模式 都 是 以 该 浏览 器 支持 的 最 高 标准 来 解析 执行 
的 。 


HTML 最 早 从 XML 衍生 而 来 ， 目 前 已 经 进入 HIML5 成 熟 阶段 。 要 
了 解 的 是 ，HTML5 不 是 基于 SGML 的 ， 不 需要 对 DTD 进 行 定义 。 实 际 
上 我 们 可 能 早已 不 再 使 用 旧版 本 的 声明 模式 了 ， 但 还 是 有 必要 了 解 其 
中 的 原因 。 


3.1.2 ”Web 语义 化 标签 


首先 给 出 web 语义 化 标准 的 定义 : Web 语 义 化 是 指 在 HTML 结 构 的 
恰当 位 置 上 使 用 语义 恰当 的 标签 ， 使 页 面具 有 良好 的 结构 ， 使 页 面 标 
等 元 素 具 有 含义 ， 能 够 让 人 或 搜索 引擎 更 容易 理解 。 


基于 此 定义 ， 我 们 需要 首先 理解 以 下 几 点 。 


o 用 正确 的 标签 做 正确 的 事情 。 例 如 ， 在 列表 的 地 方 要 使 用 列表 
元 素 ， 文 章 内 容 中 要 使 用 段落 或 文章 标签 ， 杜 绝 HTML 结 构 全 
部 使 用 <div> 元 素来 藤 套 实现 ， 因 为 <div> 是 没有 任何 语义 的 ， 
仅 代表 一 个 元 素 容器 块 。 


<!-- 不 推荐 --> 

<div class="ui-menu-list"> 
<div class="menu-1list-item"> 列 表 一 </div> 
<div class="menu-1list-item"> 列 表 二 </div> 
<div class="menu-1list-item"> 列 表 三 </div> 


</div> 


<!-- 推荐 --> 


<ul] class="ui-menu-list"> 


<11 class="menu-list-item"> 列 表 一 </1i> 
<11 class="menu-1list-item"> 列 表 二 </1i> 
<11 class="menu-list-item"> 列 表 三 </1i> 


</ul> 


o ”HTML 语义 化 能 让 页 面 内 容 更 具 结 构 化 且 更 加 清晰 ， 便 于 浏览 
器 和 搜索 引擎 进行 解析 ， 因 此 在 兼容 条 件 下 ， 要 尽量 使 用 融 
有 语义 化 结构 标签 。 例 如 ，HTML5 中 定义 <header>、<nav>、 
<footer>、 <section>、 <article> 等 标签 的 内 容 会 被 搜索 引擎 解 
析 收 录 ， 能 够 提高 页 面 内 容 关 键 字 的 搜索 排行 。 


图 3-1 为 HTML5 语 义 化 结构 标签 的 一 个 典型 的 应 用 场景 ， 目 前 使 用 
也 很 广泛 。 根 据 标 签 就 能 理解 元 素 里 面 的 大 致 内 容 功能 ， 这 样 自 然 比 
所 有 的 元 素 都 用 <div> 来 写 更 容易 理解 。 


<Nav> 


<aside> <article> 


<footer> 


图 3-1 HTML5 部 分 语义 化 结构 元 素 标签 


<!-- 不 推荐 div 布局 方式 --> 
<1DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title> 页 面 结构 </title> 
</head> 
<body> 
<div id="header"> 
页 面 头 部 
</div> 
<div id="main"> 
正文 内 容 
</div> 
<div id="footer"> 
页 面 底部 
</div> 
</body> 
</html> 


<!-- 推荐 语义 化 结构 --> 
<1DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title> 页 面 结构 </title> 


</head> 


<body> 
<header> 
页 面 头 音 
</header> 
<article> 
正文 内 容 
</article> 
<footer> 
页 面 底部 
</footer> 
</body> 
</html> 


o 即使 在 没有 样式 CSS 的 情况 下 ， 网 页 内 容 也 应 该 是 有 序 的 文档 
格式 显示 ， 并 且 是 容易 阅读 的 。 


一 般 情况 下 ， 具 有 民 好 Web 语 义 化 的 页 面 结构 在 没有 样式 文件 的 情 
况 下 也 是 能 够 阅读 的 ， 例 如 列表 会 以 列表 的 样式 展现 ， 标 题 文字 会 加 
粗 ， 而 不 是 全 部 内 容 都 以 无 层次 的 文本 内 容 形式 呈现 。 如 图 3-2 所 示 ， 
左边 是 使 用 语义 化 标签 实现 的 页 面 结构 ， 而 右边 则 是 全 部 使 用 div 布 局 
实现 的 页 面 结 构 ， 显 然 ， 使 用 语义 化 标签 的 页 面 结构 在 没有 样式 的 情 
况 下 更 容易 理解 。 


页 面 标题 


4L 
~ 
把 


上 3} 
l 
WAY 


页 面 底 部 


图 3-2 ”语义 化 结构 页 面 与 非 语义 化 结构 页 面 对 比 


o 使 项 目 维护 人 员 更 容易 对 网 站 进行 分 块 ， 便 于 疝 读 理解 。 语 义 
化 的 标签 使 用 ， 能 让 开发 者 更 容易 区 分 标签 元 素 中 的 内 容 ， 
例如 ，<nav> 一 般 是 导航 菜单 的 结构 ，<article> 则 用 于 存放 页 
面 的 文章 内 容 ， 更 加 易于 后 期 的 维护 ， 而 全 部 使 用 <div> 来 实 
现 就 不 是 那么 容易 区 分 了 。 


理解 了 以 上 几 点 ， 我 们 再 来 看 看 HTML 主 要 标签 的 设计 。CSS 规 范 
规定 : 每 个 标签 元 素 都 是 有 display 属 性 的 。 所 以 根据 标签 元 素 的 display 
属性 特点 Wy 可 以 将 HTML 标 签 分 为 以 下 几 类 。 


o 行内 元 素 : 包括 <a>、<b>、<span>、<img>、 <input>、 
<button>、 <select>、<strong> 等 标签 元 素 ， 其 默认 宽度 是 由 内 
容 宽 度 决 定 的 。 


o ” 块 级 元 素 : 包括 <div>、<ul>、<ol>、<li>、<dl>、<dt>、 
<dd>、<hl>、<h2>、<h3>、<h4>、<h5>、<h6>、<p>、 
<table> 等 标签 元 素 ， 其 默认 宽度 为 父 元 素 的 100%。 


o 常见 空 元 素 : 例如 <br>、<hr>、<link>、<meta>、 <area>、 


<base> 、 <col> 、 <command> 、 <embed> 、 <keygen> 、 
<param>、<source>、<track> 等 不 能 显示 内 容 甚 至 不 会 在 页 面 


中 出 现 ， 但 是 对 页 面 的 解析 有 着 其 他 重要 作用 的 元 素 。 


这 些 标 签 大 部 分 是 有 具体 含义 的 ， 具 有 其 适用 的 场景 。 例 如 ， 
hl1~h6 是 表示 标题 的 标签 元 素 ，u、ol、dl 分 别 表 示 无 序 、 有 序 、 带 标题 
描述 的 列表 。 而 且 HTML5 中 加 入 的 新 标签 也 基本 是 带 语 义 化 的 。 


除 此 之 外 ， 合 理 的 标签 使 用 能 够 让 搜索 引擎 更 容易 获取 页 面 的 主 
要 内 容 ， 提 升 权 重 。 例 如 ， 页 面 中 <h1> 标 题 元 素 里 面 的 文字 就 比 <div> 
标签 元 素 里 面 的 文字 更 重要 ， 会 更 容易 被 搜索 引擎 记录 下 来 ， 并 认为 
是 对 页 面 描述 更 有 用 的 内 容 (这 个 在 后 面 章节 中 会 具体 讲解 ) 。 所 以 
我 们 在 设计 HTML 结 构 时 要 尽量 注意 语义 化 的 使 用 。 


3.1.3 ”HTML 精 糕 的 部 分 


或 许 没有 人 告诉 过 你 ，Web 语 义 化 规范 并 不 是 在 任何 时 候 都 需要 严 
格 遵守 的 ， 有 时 直接 使 用 甚至 会 产生 一 些 副作用 。 例 如 在 桌面 浏览 
应 用 开发 时 ， 若 页 面 标 签 结构 中 使 用 了 HTML5 的 新 语义 化 标签 可 能 会 
导致 这 些 标签 无 法 直接 解析 ， 所 以 考虑 到 兼容 性 ， 我 们 最 终 仍然 需要 
使 用 <div> 来 代替 ， 另 外 我 们 或 许 也 会 考虑 使 用 html5.js 来 进行 特殊 解 
析 ， 但 是 这 样 在 部 分 版 本 的 浏览 嚣 中， 页面 的 解析 就 变 得 较 慢 了 。 


<1DOCTYPE html> 
<htm] lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title> 页 面 结构 </title> 
<!--[if IE]> 
<script 
src="http://htmlS5shiv.googlecode.com/svn/trunk/html5.js"> 
</script> 
< ![endif]--> 
</head> 
<body> 
<header> 
页 面 头 部 
</header> 
<article> 
正文 内 容 
</article> 
<footer> 
页 面 底 音 
</footer> 
</body> 
</html> 


天 于 前 端 标签 元 素 或 特性 的 兼容 性 ， 我 们 一 般 可 以 通过 访问 


http://caniuse.com/ 来 查询 。 


再 如 页 面 中 使 用 <table> 这 个 语义 化 标签 是 会 导致 内 容 泻 染 较 慢 
的 ， 因 为 <table> 里 面 的 内 容 泻 染 是 等 表格 内 容 全 部 解析 完 生 成 演 染 树 
后 一 次 性 泻 染 到 页 面 上 的 ， 如 果 表 格 内 容 较 多 ， 就 可 能 产生 泻 染 过 程 
较 慢 的 问题 ， 因 此 我 们 常常 需要 通过 其 他 的 方式 来 模拟 <table> 元 素 ， 
例如 使 用 无 序列 表 来 模拟 表格 。 


<section class="ui-table"> 
<ul class="ui-table-list row"> 
<1i class="table-cell table-title"> 单 元 格 标 题 一 </1i> 
<11 class="table-cell table-title"> 单 元 格 二 </1i> 
<li class="table-cell table-title"> 单 元 格 三 </1i> 


</ul> 


<ul class="ui-table-list row"> 
<1i class="table-cell"> 单 元 格 一 </1i> 
<1i class="table-cell"> 单 元 格 二 </1i> 
<li class="table-cell"> 单 元 格 三 </1i> 


</ul> 


<ul class="ui-table-list row"> 
<1i class="table-cell"> 单 元 格 一 </1i> 
<1i class="table-cell"> 单 元 格 二 </1i> 
<li class="table-cell"> 单 元 格 三 </1i> 
</U]> 


</section> 


除了 <table> 元 素 的 性 能 问题 ，HTML 中 还 有 一 些 糟糕 的 设计 需 
我 们 注意 ， 例 如 你 可 以 任意 编写 HTML 赃 套 结 构 ， 并 能 够 在 任何 位 置 使 
用 任何 元 素 ， 也 可 以 通过 内 联 CSS 来 改变 HTML 的 任何 样式 属性 ， 甚 至 
HTML 标 签 随意 写 或 者 CSS 属 性 使 用 错误 都 不 会 报错 。 这 样 就 比较 糟 料 
了 ， 增 加 了 很 多 犯错 的 可 能 性 。 


所 以 我 们 编写 HTML 时 尤其 需要 注意 这 些 问题 ， 下 面 来 看 几 个 常见 
的 HIML 标 签 使 用 的 糟糕 场景 。 


<!-- <img> 元 素 标签 可 以 不 用 写 alt 或 title， 也 能 正常 显示 --> 


<img Src="photo ,jpg"/> 


<!- - <a> 元 素 标签 可 以 不 写 href 属性 ， 不 过 这 样 容易 出 现 问题 。 即 使 添加 块 级 元 素 
也 不 会 报错 ， 但 是 里 面 的 内 容 在 
浏览 器 解析 后 会 发 生 位 置 偏 移 ， 如 果 出 了 问题 将 很 难 定位 --> 


<a><h2></h2></a> 


<!-- 并 不 是 所 有 的 标签 都 是 带 有 语义 化 的 ，<div>、<i> 就 是 比较 典型 的 例子 ， 所 以 
尽量 避免 在 这 些 标签 里 面 直接 添 

加 文字 ， 实 际 项 目 开 发 中 ， 我 们 常常 把 <i> 元 素 标 签 当 作 页 面 上 的 icon 图 标 标签 来 使 
用 --> 

<div></div> 


<1i></i> 


<!-- 尽管 HTML 规范 提供 了 有 语义 化 的 列表 元 素 ， 但 我 们 仍然 可 以 用 下 面 这 种 方式 来 
定义 列表 ， 而 且 在 页 面 上 也 可 以 
正常 显示 --> 


<div> 


<Span class="list-item">1</span> 
<Span class="list-item">2</span> 
<Span class="list-item">3</span> 


</div> 


<1-- 元 素 中 可 以 使 用 内 联 样式 ， 当 然 这 是 旧版 本 的 历史 问题 ; 元 素 样式 里 面 随意 添加 
top 属性 也 是 可 以 的 ， 只 是 不 

生效 且 不 会 报错 ; 加 入 display:relative; 也 不 会 提示 错误 ， 但 relative 并 不 
是 display 的 属性 --> 

<div style="width:100px;height:30px;top:1i0px;display:relative;"> 


</div> 


<!-- HTML 定义 了 table 元 素 , 但 table 是 一 次 性 泻 染 的 ， 如 果 表 格 内 容 较 长 就 
比较 慢 了 --> 
<table> 
<thead>table list</thead> 
<tr> 
<th>list 1</th> 
<th>list 2</th> 
<th>list 3</th> 
</tr> 
<tr> 
<td>1list 1</td> 
<td>1list 2</td> 
<td>1list 3</td> 


</tr> 


<tr> 
<td>Jist n</td> 
<td>1list n+1</td> 
<td>1list n+2</td> 
</tr> 
</table> 
<!- - 表单 输入 项 内 容 不 写 label 也是 没 问 题 的 ，<label> 可 以 定义 与 表单 控件 间 的 
关系 ， 当 用 户 选择 该 标签 时 ， 浏 
览 器 会 自动 将 焦点 转 到 和 标签 相关 的 表单 控件 上 。 - -> 


Date:<input type="text" name="name"/> 


<!- - 还 有 一 些 很 不 合理 的 标签 ， 新 的 标准 已 经 将 它们 弃 用 了 --> 
<blink></blink> 
<marquee></maquee> 


<stike></strike> 


<img> 标 签 的 alt 属 性 和 title 属 性 是 有 区 别 的 ，alt 属 性 一 般 表 示 图 
片 加 载 失败 时 提示 的 文字 内 容 ，title 属 性 则 指 鼠 标 放 到 元 素 上 时 显示 
的 提示 文字 。 在 页 面 结构 书写 中 ， 我 们 常用 title 来 提示 一 些 省 略 掉 的 
文字 的 全 部 内 容 。 例 如 <p title=" 这 是 一 段 很 长 的 文字 ， 包 含 很 多 内 
容 "> 这 是 一 段 很 长 的 文字 ...</p>， 这 样 在 页 面 中 可 能 只 展示 部 分 文 
字 ,， 但 用 户 可 以 通过 鼠标 提示 看 到 这 上段 文字 的 完整 内 容 ， 这 对 于 提 
高 页 面 用 户 体验 是 很 有 帮助 的 。 


很 显然 ， 这 些 粳 糕 的 设计 不 仅 降 低 了 页 面 可 读 性 ， 拖 慢 了 页 面 性 
能 ， 不 利于 SEO， 而 且 误导 了 初学 者 对 HTML 的 理解 使 用 ， 更 有 可 能 让 
我 们 在 已 经 出 错 的 情况 下 找 不 到 错误 的 原因 和 方向 。 因 此 ， 我 们 必须 
想 办 法 尽 可 能 避免 这 些 问题 的 发 生 。 其 中 的 一 种 思路 是 ， 借 助 现代 开 
发 工具 插件 或 构建 工具 插件 来 分 析 上 面 HTML 页 面 中 编码 糟糕 的 地 方 ， 
例如 发 现 内 容 里 有 行内 元 素 里 说 套 了 块 级 元 素 时 ， 就 通过 插件 分 析 报 
错 来 辅助 我 们 进行 正确 的 书写 开发 。 辅 助 工具 可 以 提示 一 部 分 问题 ， 
但 并 非 所 有 的 问题 都 能 得 到 解决 。 另 一 方面 ， 如 果 我 们 想 让 HTML 的 结 
构 进 一 步 优 化 提升 ， 可 以 考虑 党 试 AMP HTML。 


3.1.4 AMP HTML 


流动 网 页 提速 (Accelerated Mobile Pages，AMP) 是 google 推 行 的 
一 个 提升 页 面 资 源 载 入 效率 的 HTML 提 议 规 范 。 基 本 思路 有 两 点 : 使 用 
严格 受 限 的 高 效 HTML 标 签 以 及 使 用 静态 网 页 缓存 技术 来 提高 网 络 访问 
静态 资产 的 性 能 和 用 户 体 验 。 也 就 是 说 ， 尽 量 避 免 使 用 目前 网 页 上 泻 
染 或 展示 性 能 比较 差 的 标签 ， 并 将 部 分 网 页 静态 内 容 缓存 到 页 面 上 进 
行 分 发 ， 例 如 内 联 体 积 较 小 的 样式 和 图 片 、 延 时 加 载 较 大 的 静态 资源 
文件 等 ， 进 而 提高 网 页 的 初始 载 入 速度 。 


AMP 提 议 中 包含 了 一 部 分 网 页 端 优化 的 内 容 ， 前 端 网 页 优化 我 们 
都 已 经 做 过 了 ， 在 此 着 重 来 看 AMP 的 第 一 部 分 。 使 用 受 限 的 HTML 标 
签 来 进行 AMP HTML 提升 ， 这 只 是 一 个 规范 提议 ， 不 涉及 任何 一 项 具 
体 的 技术 ， 例 如 在 AMP 中 ，<img>、<video>、<audio>、<embed>、 
<form>、 <table>、<frame>、<object>、<iframe> 这 类 较 慢 或 可 能 影响 
页 面 内 容 泻 染 的 标签 是 不 建议 被 直接 使 用 的 ， 因 为 它们 常常 在 页 面 元 
素 解 析 时 就 要 去 做 较 慢 的 演 染 或 者 会 立即 直接 下 载 src 或 param 等 属性 里 


面 的 内 容 。<video> 标 签 载 入 解析 时 会 去 直接 请 求 src 里 面 的 资产 内 容 ， 
这 样 就 占用 了 浏览 器 的 下 载 线程 ， 阻 塞 了 页 面 关键 资产 的 下 载 ， 所 以 
我 们 可 以 将 这 些 元 素 需要 加 载 的 资源 先 缓存 到 HIML 结 构 中 ， 等 页 面 主 
体 结构 泻 染 完成 后 再 去 加 载 ， 类 似 懒 加 载 ， 不 同 的 是 AMP HTML 是 通 
过 自 定义 元 素 完 成 Component 来 实现 的 ， 懒 加 载 则 是 通过 JavaScript 直 接 
在 网 页 中 操作 实现 。 


浏览 器 同一 个 域名 的 最 大 并 行 下 载 线程 个 数 是 有 限 的 ， 所 以 我 
们 常常 要 先 加 载 页 面 的 关键 性 展示 资源 ， 延 后 加 载 页 面 脚本 类 资源 
或 页 面 的 非 关 键 性 图 片 资 源 。 一 般 浏 览 器 (IE8 以 上 ) 对 同一 个 域名 
下 的 资源 最 多 支持 4~6 个 并 行 下 载 数 ， 所 以 为 了 增 大 资源 下 载 并 行 
数 ， 我 们 常常 将 HTML、JavaScript、CSS、 图 片 资源 分 域 存放 。 分 域 
也 可 以 将 静态 资源 请 求 进行 服务 器 端的 负载 均衡 ， 并 对 请 求 中 的 
cookie 信 息 进行 隔离 ， 因 为 跨 域 请 求 默认 是 不 带 Cookie 的 ， 这 样 便 减 
小 了 JavaScript、CSS、 图 片 等 资源 的 请 求 头 部 信息 大 小 ， 从 而 提升 
了 请 求 的 解析 速度 。 


<amp -Video width="400" height="300" 
src="http://www.domain.com/videos/myvideo.mp4" 
poster="path/poster.jpg"> 
<div fallback> 
<p>Your browser doesn’t support HTML5 video</p> 
</div> 


<source type="video/mp4" src="myvideo.mp4"> 


<source type="video/webm" src="myvideo.webm"> 


</amp-video> 


这 里 是 AMP 标 签 <amp-video> 的 一 个 例子 ，AMP HTML 提 出 了 一 个 
可 选 的 实现 方案 就 是 通过 添加 自 定 义 元 素来 代替 AMP 规 范 限制 的 元 
素 ， 即 使 用 <amp-video>、<amp-img>、<amp-audio>、<amp-pixel> 等 来 
做 页 面 元 素 内 容 的 延迟 载 入 或 泻 染 ， 其 实 本 质 上 这 类 标签 的 逻辑 封装 
实现 和 异步 加 载 有 点 类 似 。 同 样 ，JavaScript 的 脚本 使 用 也 被 严格 限制 
或 做 了 类 似 的 处 理 ， 通 过 完全 异步 加 载 的 方式 来 改变 和 优化 页 面 上 资 
源 的 加 载 顺 序 ， 保 证 整体 页 面 内容 能 尽快 完成 加 载 泻 染 。 根 据 AMP 团 
队 测 试 ， 通 过 AMP 规 范 优 化 后 的 网 页 载 入 速度 可 以 提升 15% 居 859%， 那 
么 在 海量 用 户 请 求 访问 的 情况 下 ， 这 就 很 有 价值 了 。 


但 这 点 似乎 和 HTML 设 计 的 初衷 相 背 离 ， 也 不 是 Web 语 义 化 所 提倡 
的 ， 另 外 HTML 不 同 元 素 在 设计 时 本 身 效率 是 各 不 相同 的 ， 如 果 让 效率 
较 高 的 元 素来 代替 其 他 慢 元 素 的 高 频率 泻 染 ， 这 样 AMP HTML 的 优势 
融 可 以 体现 出 来 了 。 总 结 来 看 ， 使 用 AMP 提 升 页 面 性 能 的 基本 的 原则 
如 下 。 


o 只 人 允许 异步 的 script 脚 本 

o 只 加 载 静态 的 资源 

o 不 能 让 内 容 阻 塞 泻 染 

o 不 在 关键 路 径 中 加 载 第 三 方 JavaScript 
o 所 有 的 CSS 必 须 内 联 


o 字体 使 用 声明 必须 高 效 


o 最 小 化 样式 声明 

o 只 运行 GPU 加 速 的 动画 

o 处 理 好 资源 加 载 顺序 问题 

o 页 面 必 须 立 即 加 载 

o 提升 AMP 元 素性 能 

以 下 是 一 个 最 简单 的 AMP HTML 例 子 。 


<IDOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<link rel="canonical" href="hello-world.html"> 
<meta name="viewport" content="width=device-width,minimum- 
scale=1,initial-scale=1"> 
<style amp-boilerplate> 
body { 
-webkit-animation: -amp-start 8s steps(1, end) 0s 1 
normal both; 


animation: -amp-start 8s steps(1, end) 0s 1 normal both ; 


@-webkit-keyframes -amp-start { 
from { 


visibility: hidden; 


to { 


visibility: visible; 


@keyframes -amp-start { 
from { 
visibility: hidden; 
} 
to { 


visibility: visible; 


} 
} 
</style> 
<noscript> 
<style amp-boilerplate> 
body { 
-webkit-animation: none; 
-moz-animation: none; 
-ms-animation: none 
animation: none; 
} 
</style> 
</noscript> 


<script async src="https://cdn.ampproject.org/vo. 


</script> 


js"> 


</head> 
<body>Hello World!</body> 
</html> 


这 里 所 说 的 “ 快 ”其 实 并 不 是 单纯 指 页 面 泻 染 速度 快 ， 还 包括 将 
可 以 异步 或 延 后 的 泻 染 操作 延 后 ， 在 保证 用 户 体验 不 降低 的 情况 下 
尽早 展示 关键 性 内 容 。 


上 面 这 上段 代码 使 用 了 页 面 动 画 的 加 速 ， 通 过 noscript 和 async 等 异步 
的 方式 载 入 CSS 和 JavaScript 内 容 ， 让 HTML 尽 可 能 快 地 完成 泻 染 解 析 。 
其 实 AMP HTML 标 签 的 实现 原理 可 以 理解 为 采用 自 定义 的 快 加 载 标 签 
元 素 (标签 资源 内 容 延 后 加 载 的 元 素 ) 来 代替 慢 加 载 标 签 元 素 (标签 
资源 内 容 立 即 加 载 的 元 素 ) 。 举 个 例子 ， 假 如 网 页 中 的 元 素 分 两 类 : 
快 元 素 <F> (fast 元 素 ) 和 慢 元 素 <S> (slow 元 素 ) 。<F> 类 元 素 比 <S> 
类 元 素 的 解析 执行 时 间 短 80% (这 是 完全 有 可 能 的 ) ， 即 平均 一 个 <S> 
元 素 要 用 4 个 <F> 元 素 代 替 。 如 果 现 在 页 面 上 <F> 和 <S> 类 元 素数 量 各 为 
50% ， 要 完全 使 用 <F> 类 元 素 代 替 ， 那 么 页 面 载 入 效率 提升 比例 为 1- 
(50%+50%*4(1-80%))=10%， 这 是 一 个 很 明显 的 提升 ， 而 <F> 类 元 素 则 
可 能 是 AMP HTML 定 义 的 <amp-table> 的 实现 ， 用 来 解决 <table> 元 素 慢 
的 问题 。 显 然 这 种 思路 在 可 行 性 和 AMP 团 队 的 实践 结果 上 面 都 是 很 有 
意义 的 ， 而 且 已 经 在 Google、Facebook 网 站 上 优化 推行 了 。 


而 如 果 需 要 在 实际 项 目 中 去 推行 也 比较 简单 ， 按 照 AMP 标 签 规范 
去 开发 业务 组 件 (也 就 是 AMP HTML Component) 就 可 以 了 。 所 以 一 


个 简单 的 场景 ， 例 如 我 们 常用 列表 元 素来 代替 <table> 内 容 或 者 图 片 的 
懒 加 载 实 现 ， 某 种 意义 上 就 和 AMP 的 思想 是 一 致 的 。 


资料 : https://www.ampproject.org/o 


3.2 “前端 结构 层 演 进 


3.2.1 XML 与 HTML 简 述 


ee 展 标 记 语 言 (Extentsible Markup Language，XML) 是 用 来 描 
络 上 存储 数据 的 一 种 特殊 文本 标记 格式 。 它 是 在 ee 
ie XML 推 荐 使 用 一 对 闭合 标签 的 形式 来 描述 数据 的 名 称 ， 这 
对 半生 本 过 诗风 的 由 富 则 表 丰 对 邮 的 值 ， Es 
的 标签 必须 与 一 个 结束 标签 配对 ， 否 则 将 不 能 按照 正确 的 XML 结构 解 
析 ， 而 且 标 签 之 间 可 以 认 套 。 我 们 通过 一 段 XML 声 明 便 可 以 使 用 标签 
骨 套 来 书写 搞 述 信息 了 ， 代 码 如 下 。 


<?xml1 version="1.0" encoding="IS0-8859-1"?> 
<info> 
<name>George</to> 
<job>engineer</job> 
<address> 
<country>Cchina</country> 


<city>Shenzhen</city> 


</address> 
<website>http://www.jixianqianduan.com</website> 


</info> 


HTML 则 是 从 SGML 的 基础 上 演化 而 来 的 另 一 种 文本 标记 语言 ， 一 
般 用 于 网 络 上 数据 的 展示 。 相 比 而 言 ，XML 更 偏向 于 存储 数据 ， 例 如 
我 们 熟知 的 SQLite 数 据 库 ， 其 底层 数据 就 是 通过 XML 存 储 在 硬盘 上 
的 。 而 HTML 则 偏重 于 将 数据 读 取出 来 装载 到 浏览 器 中 展示 给 用 户 。 从 
语法 规则 的 定义 上 来 看 ，XML 与 HTML 之 间 没 有 必然 的 联系 ， 它 们 是 
针对 不 同 的 应 用 场景 而 设计 的 。 从 语法 使 用 上 来 看 ，XML 的 灵活 度 更 
高 ， 我 们 可 以 自 定 义 任意 名 称 的 标签 来 使 用 XML ， 而 HIML 则 是 具有 
一 定 规范 约束 的 ， 例 如 只 有 特定 的 HTML 标 签 才能 被 浏览 器 识别 。 


前 面 讲 过 ，HTML 4.01 是 w3C 在 1999 年 制定 发 布 的 HTML 语 言 规 
范 ， 而 HTML5 到 2014 年 才 正 式 发 布 ， 在 这 期 间 我 们 可 以 认为 页 面 的 结 
构 主要 是 通过 <div> 来 实现 的 ， 曾 经 我 们 甚至 一 度 认 为 前 端 页 面 技术 就 
是 CSS + DIV 技 术 ， 当 然 这 是 在 前 端 技术 发 展 早 期 ，HTML 的 元 素 主 要 
分 为 行内 、 块 级 和 常见 空 元 素 几 类 。 


HTML5 是 HTML 的 第 5 个 版 本 ， 但 它 不 是 基于 SGML 语 言 演化 而 
来 ， 而 是 W3C 完 全 自 定义 的 一 套 标准 规范 。 它 向 后 兼容 了 低 版 本 的 
HTML 4.01 的 绝 大 多 数 标签 ， 并 添加 了 更 多 语义 化 标签 ， 例 如 
<header>、<nav>、<footer>、<section>、<video>、<audio> 等 。 需 要 知 
道 的 是 ， 尽 管 HTML5 包 含 了 绝 大 多 数 的 低 版 本 HTML 标 签 ， 但 是 在 浏 
览 器 解析 时 的 <DOCTYPE html> 声 明 中 是 不 需要 文档 类 型 定义 的 。 目 前 
遵循 W3C 标 准 的 浏览 器 均 默认 支持 使 用 HTML5 的 DOCTYPE 定 义 解 
析 ， 如 果 不 支 持 则 默认 使 用 低 版 本 兼容 模式 来 解析 。 


3.2.2 HTML5 标 准 


HTML5 增 加 了 较 多 新 的 语义 化 标签 ， 同 时 对 应 的 BOM 对 象 和 
DOM 对 象 也 添加 了 相应 的 API， 目 前 由 于 移动 端 浏览 器 内 核 具 有 相对 
较 好 的 统一 性 和 兼容 性 ， 所 以 HTML5 主 要 用 于 移动 端 页 面 的 开发 。 我 
们 先 来 看 一 下 HTML5 带 来 的 有 语义 化 的 元 素 标签 。 根 据 HTML5 新 规范 
添加 的 标签 ， 总 结 起 来 可 以 分 为 以 下 几 类 ， 如 表 3-1 所 示 。 


表 3-1 HTML5 新 增 元 素 类 型 


HTMIL4 描述 与 其 他 类 似 标签 


一 般 用 来 定义 页 面 的 头 部 模块 元 
素 。 类 似 的 还 有 footer (底部 ) 、 


<header> <div id="header"> 


nav (导航 元 素 ) 、section (区 
段 ) 、hgroup (与 section 组 合 ) 等 
页 面 结构 标签 


</header> </div> 


<object 


用 来 插入 一 个 视频 播放 器 界面 。 类 


type="video/ogg" 


<video src= i 似 的 有 audio (音频 ) 、embed ( 插 
| data="movie.ogv"> oo 
"movie .ogg"> 件 ) 、canvas 〈 自 定义 图 形 ， 
<param name="src" 人 
< /video> HTML 5 之 前 用 svg) 等 显示 媒体 的 
value="movie.ogv">| 
| 标签 
</object> 


<param name=""| 插 入 视频 或 音频 的 属性 配置 参数 标 


value=""/> 签 。 


<source /> 


<article> |<p></p> 描述 一 个 段落 文章 元 素 标签 。 类 似 
</article> 的 有 aside (文章 外 内 容 ) 、details 
(元 素 细 节 ) 、figure (描述 信息 ) 
等 内 容 类 标签 。 
输出 时 间 标 签 ， 类 似 的 有 output 
<span></span> (页 面 输出 内 容 ) 、mark (页 面 需 
要 突出 的 文字 ) 等 标记 类 标签 。 


可 选 数 据 的 列表 ， 和 input 配 合 使 
Combox 
用 。 
none 显示 JavaScript 等 执行 进度 标签 
</progress> 


定义 命令 按钮 。 类 似 的 有 figcaption 
(定义 figure 元 素 的 标题 ) 、keygen 
<command/> |none (页 面 密 钥 ) 、meter (度量 衡 ) 、 
summary (描述 ) 、ruby ( 同 rp、xt 
注释 ruby 代 码 使 用 ) 等 标签 


我 们 也 可 以 用 HIML5 之 前 版 本 的 标签 来 代替 。 当 然 ， 这 里 也 包含 
一 些 看 似 比较 实用 ， 实 际 在 项 目 中 并 不 会 经 常 使 用 的 语义 化 标签 ， 例 


如 <command>、<meter> 等 。 


HTML5 除 了 新 增 一 部 分 元 素 标 签 外 ， 还 在 一 部 分 原 有 标签 中 增加 
了 一 些 新 属性 。 例 如 <input> 这 个 元 素 标 签 的 属性 值 变 化 就 比较 大 ， 
<input> 新 增 的 属性 有 autocomplete、placeholder、autofocus、required， 
另外 type 属 性 也 增加 了 email、url、number、range、color、search、date 


等 这 些 类 型 来 满足 更 多 的 应 用 场景 ， 下 面 的 代码 就 可 以 实现 原生 的 日 


期 时 间 选 择 。 


<input type="text" autocomplete="on" 
autofocus required/> 

<input type="color" /> 

<input type="date" /> 


<input type="time" /> 


placeholder=" 请 输入 姓名 " 


用 较 新 的 浏览 器 解析 这 段 HTML， 可 以 看 到 这 两 个 标签 的 定义 会 出 
现 一 个 日 期 时 间 选 择 器 和 一 个 颜色 选择 器 ， 如 图 3-3 所 示 。 


年 /月 /日 | 23: 


2016 年 09 月 ~ 4 


1 2 
5 6 了 8 9 
12 13 14 15 16 
19 20 21 22 23 
26 27 28 29 30 


周一 周二 周二 周 四 周 五 同上 周 日 


3 4 
10 11 
17 18 
24 25 


图 3-3 ”HTML5 日 期 时 间 与 颜色 选择 


不 知道 你 有 没有 想 过 ， 为 什么 <input> 这 么 简单 的 标签 定义 能 生成 
这 样 两 个 较 复杂 的 选择 输入 界面 呢 ? 我 们 为 什么 还 要 常常 找 第 三 方 日 


期 时 间 选 择 器 来 自己 实现 呢 ? 类 似 的 标签 还 有 很 多 ， 例 如 <video>、 


<audio> 等 。 既 然 是 HTML5 自 带 的 ， 浏 览 器 原生 就 应 该 支持 ， 但 浏览 
为 什么 就 可 以 这 样 做 呢 ? 接着 来 了 解 下 一 节 的 内 容 ， 找 到 这 些 问 题 的 


Py ms | 
答案 。 


3.2.3 HTML Web Component 


要 解决 上 一 节 中 的 问题 ， 必 须 提 到 Shadow DOM。 先 不 急于 解释 
Shadow DOM 是 什么 ， 我 们 来 看 一 个 例子 。 


<video src="./assets/media.mp4" controls autoplay name="media"> 


</video> 


如 图 3-4 所 示 ，<video> 这 样 一 个 标签 可 以 在 浏览 器 产生 一 个 界面 相 
对 复杂 且 带 有 播放 控制 的 播放 器 ， 这 是 如 何 做 到 的 呢 ? 为 了 便于 理解 
这 个 问题 ， 我 们 以 Chrome 浏 览 器 为 例 ， 选 择 浏览 器 调试 工具 设置 中 的 
show userAgent Shadow DOM， 就 可 以 看 到 Shadow DOM 里 的 内 容 。 


SD 
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图 3-4 ”video 标 签 浏览 器 显示 效果 


<video src="./assets/midea.mp4" controls autoplay name="media"> 


#Shadow root 
<div pseudo="-webkit-media-controls"> 
<div pseudo="-webkit-media-controls-overlay-enclosure"> 
<input type="button" style="display: none;"> 
</div> 
<div pseudo="-webkit-media-controls-enclosure"> 
<div pseudo="-webkit-media-controls-panel" 
style="display: none;"> 
<input type="button" pseudo="-webkit-media- 
controls-play-button"> 
<input type="range" step="any" pseudo="- 
webkit-media-controls-timeline" 
max="0"> 
<div pseudo="-webkit-media-controls-current- 
time-display" style="display: 
none;">0:00</div> 
<div pseudo="-webkit-media-controls-time- 
remaining-display">0:00</div> 
<input type="button" pseudo="-webkit-media- 
controls-mute-button"> 
<input type="range" step="any" max="1" 
pseudo="-webkit-media-controls-volume-slider" style="display: 
none;"> 
<input type="button" 
pseudo="-webkit-media-controls-toggle-closed-captions-button" 
style="display: none;"> 


<input type="button" style="display: none;"> 


<input type="button" pseudo="-webkit-media- 
controls-fullscreen-button" 
style="display: none;"> 
</div> 
</div> 
</div> 


</video> 


很 明显 ， 这 里 的 <video> 标 签 中 其 实 有 很 多 的 内 容 ， 隐 藏 的 
Shadow-root 里 面 的 内 容 就 是 以 上 视频 播放 器 控制 组 件 HTML 结 构 的 交 
在 之 处 ， 对 应 的 CSS 也 是 可 以 看 到 的 ， 可 见 标签 内 部 也 是 由 很 多 
<div>、<input> 和 与 之 对 应 的 CSS 样 式 形 成 的 。 另 外 ， 
其 置 灰 ， 是 为 了 表明 这 部 分 是 Sshadow DOM 里 面 的 内 容 ， 在 页 面 中 ， 其 
他 部 分 是 不 能 调用 这 里 面 的 隐藏 元 素 的 。 也 就 是 说 ， 你 自己 写 的 CSS 选 
择 器 和 JavaScript 代 码 都 不 会 影响 到 Shadow DOM 里 面 的 内 容 。 实 质 上 
就 是 让 <video> 标 签 里 的 逻辑 和 样式 都 被 浏览 器 单独 封装 并 与 外 界 元 素 
独立 ， 而 <video> 标 签 内 容 在 浏览 器 上 的 泻 染 则 是 在 浏览 器 结构 UI 后 端 
模块 中 设置 的 。 


再 来 具体 看 下 什么 是 Shadow DOM，Shadow DOM 是 HTML 的 一 个 
规范 ， 它 允许 浏览 器 开发 者 封装 自己 的 HTML 标 签 、CSS 样 式 和 特定 的 
JavaScript 代 码 ， 同 时 也 可 以 让 开发 人 员 创 建 类 似 <video> 这 样 的 目 定义 
一 级 标签 ， 创 建 这 些 新 标签 内 容 和 相关 的 API 被 称 为 Web Component。 
这 里 提出 了 Shadow DOM 和 Web Component 两 个 概念 ， 大 家 要 弄 明白 两 
者 之 间 的 区 别 和 关联 。 


Shadow root 是 Shadow DOM 的 根 节 点 ; Shadow tree 为 这 个 Shadow 
DOM 包 含 的 节点 子 树 结构 ， 例 如 <div> 和 <input> 等 ; Shadow host 则 称 


为 Shadow DOM 的 容器 元 素 ， 即 上 面 的 标签 <video>。 那 么 我 们 该 如 何 
使 用 Web Component 创 建 一 个 Shadow DOM 呢 ? 


新 版 本 的 浏览 器 提供 了 创建 Shadow DOM 的 API， 指 定 一 个 元 素 ， 
然后 可 以 使 用 document.createShadowRoot() 方 法 创建 一 个 Shadow root， 
在 Shadow root 上 可 以 任意 通过 DOM 的 基本 操作 API 添 加 任意 的 Shadow 
tree， 同 时 指定 样式 和 处 理 的 逻辑 ， 并 将 自己 的 API 暴 露出 来 。 完 成 创 
建 后 需要 通过 document. 在 文档 中 注册 元 素 ， 这 样 
Shadow DOM 的 创建 就 完成 了 。 需 要 注意 的 是 ， 目 前 该 方法 仅 支 持 
chrome 31 及 Android 4.4 以 上 版 本 的 浏览 器 。 以 下 为 一 个 图 文 组 合 的 
Shadow DOM 元 素 功 能 实现 代码 。 


<1doctype html> 
<html> 
<head> 
<meta charset="UTF-8"/> 
<title> 图 文 组合 插 件 </title> 
<!-- import 引入 组 件 内 容 - -> 
<link href="./image.html" rel="import" /> 
</head> 
<body> 
<1-- 这 里 注册 生成 了 一 个 shadow host 为 <x-ijmage> 的 DOM 元 素 --> 
<x-image src="./image.jpg" width="290" height="160" alt=" 带 文 
字 描 述 的 图 片 "></x-image> 
</body> 
</html> 


组 件 模板 的 代码 文件 如 下 。 


<!-- 定义 组 件 - -> 
<template> 
<!-- 组 件 模板 --> 
<style> 

/* Shadow host 内 容 */ 

:host { 
display: block; 

} 

:host .x-image { 
position: relative; 
display: block; 
margin: 0; 
padding: 0; 
width: 100%; 

} 

:host .x-image .x-image-imaget{ 
margin: 0; 
padding: 0; 
width: 100%,; 
height: 100%; 

} 

:host .x-image .x-image-texttf{ 
position: absolute; 
display: block; 
bottom: 0O; 
padding: 10px 5px; 
left: 0; 


right: 9; 
color: #fff; 
background: rgba(0,0,0,0.5); 
} 
</style> 


<div class="x-image "> 
<span class="x-image-image"> 
<img class='image' src="" alt="image" height="200"> 
</span> 
<span class="x-image-text">demo</span> 
</div> 
</template> 
<script> 
// 在 本 文件 被 导入 后 自动 执行 
(function(doc) { 
"use strict"; // 启用 严格 模式 
// 所 有 实例 元 素 对 象 的 公共 prototype 
let XImage = Object.create(HTMLElement.prototype, { 
height: { 
get: function() { return this._ height; }, 
set: function(height) { 
this._height = height; 
this._innerBanner.style.height = height + 


‘px 


this._innerBanner.querySelector('.image').style.height = height 


+ px / 


上 
}, 
width: { 
get: function() { return this, width; }, 
set: function(width) { 
this. width = width; 
this._innerBanner.style.width = width + 
‘px 
this._innerBanner.querySelector('.image').style.width = width 
+ px / 
上 
}, 
alt: { 


get: function() { return this. width; }, 
set: function(alt) { 


this. alt = alt; 


this._innerBanner.querySelector(' ,banner - 


text ' ) ,InnerHTML = alt; 


this._innerBanner.querySelector('.image').setAttribute('alt', 


alt ); 


src: { 
get: function() { return this._ src; }, 
set: function(src) { 


this._src = src; 


this._innerBanner.querySelector('.image').setAttribute('src', 


src); 
} 
} 
}); 
// 组 件 被 创建 时 执行 ， 相 当 于 构造 阅 数 
XImage.createdCallback = function() { 
// 创建 Shadow root， 将 自 定义 模板 放 入 其 中 
let shadowRoot = this.createShadowRoot ( ) ; 
let template = doc.querySelector("template"); 
let node = document.importNode(template.content, 
true); 


this._innerBanner = node.querySelector(".banner- 
section"); 
// 设置 传 入 属性 ， 并 应 用 到 Shadow DOM 内 容 中 
let height = this, height | | 
Number (this.getAttribute("height")), 


width this. width || 


Number (this.getAttribute("width")), 
alt = this. alt | | 
String(this.getAttribute('alt')), 


SrC = this,_ src | | 


String(this.getAttribute('src')); 


if (!isNaN(height) || !isNaN(width)) { 
this.height = height; 


this.width = width; 


} 
If(alt){ 

this.alt = alt; 
} 


this.src = src; 
shadowRoot .appendChild(node); 
}; 
// 注册 组 件 
document.registerElement("x-image", { prototype: XImage 


}); 


})(document ,currentScript .ownerDocument ) ， 


</script> 


这 里 在 HTML 中 使 用 HTML import 方 式 引 入 外 部 的 Shadow DOM 内 
容 ，Shadow host 为 <x-image>， 在 支持 Shadow DOM 的 浏览 器 上 会 显示 
如 图 3-5 所 示 的 效果 ， 即 描述 文字 在 图 片 底部 区 域 的 一 个 悬浮 效果 ， 同 
时 在 自 定义 的 组 件 里 我 们 也 可 以 按照 自己 的 需要 向 外 暴露 可 配置 的 属 
性 和 Web API 接 口 。 


290x160 


图 3-5“” 带 悬浮 文字 的 图 片 标签 显示 效果 


根据 该 原理 实现 Shadow DOM 的 流程 就 是 Web Component 技 术 。 我 
们 已 经 知道 了 应 该 怎么 做 ， 那 么 再 来 看 一 下 利用 Web Component API 创 
建 实 现 一 个 Shadow DOM 时 需要 注意 哪些 方面 。 


o 注册 的 Shadow host 名 称 不 能 与 浏览 器 自 带 的 原生 Shadow host 名 
称 相 同 ， 这 个 应 该 很 容易 理解 ， 就 是 不 允许 出 现 两 个 名 称 相 
同 但 是 功能 不 同 的 元 素 标签 ， 例 如 HIML5 规 范 中 含有 
<header > 元素， 就 不 能 再 创建 Shadow host 为 <header> 的 
Shadow DOM。 


<!-- 不 推荐 --> 
<audio>,,,</audio> 
<video>,...</video> 
<!-- 回 过 头 看 下 AMP HTML Component， 其 创建 方式 也 是 Web 
Component --> 
<amp-audio>...</amp-audio> 


<amp-video>...</amp-video> 


o 注意 样式 模块 的 隔离 ， 一 定 要 保证 当前 的 Shadow DOM 样 式 只 
在 当前 Shadow DOM 内 生效 。 由 于 我 们 自己 也 可 以 创建 
Shadow DOM 的 样式 ， 所 以 开发 的 时 候 就 要 注意 规范 ， 否 则 会 


O 


造成 Shadow DOM 之 间 样 式 耦 合 、 相 互 影响 的 问题 。 一 般 我 们 
将 Shadow DOM 唯 一 的 Shadow host 作 为 类 名 来 定义 ， 例 如 <x- 
image> 的 样式 定义 可 以 编写 如 下 。 


<style> 

/* Shadow host 内 容 */ 

:host { 
display: block; 

} 

:host .x-image { 
position: relative; 
display: block; 
margin: 0; 
padding: 0; 
width: 100%,; 

} 

</style> 


暴露 合理 的 有 效 属 性 配置 和 DOM API 接 口 。 例 如 上 面 实例 中 内 
容 的 src、width、height 属 性 配置 对 于 元 素 的 最 终 表 现 是 有 影 
响 的 ， 我 们 在 创建 Shadow DOM 的 同时 也 要 考虑 到 Shadow 
DOM 的 可 定制 和 扩展 性 。 


在 目前 浏览 器 不 完全 支持 Web Component 的 情况 下 ， 如 果 需 要 
在 实际 项 目 中 使 用 ， 我 们 还 需要 解决 好 如 何 构建 打包 的 问 
题 。 通 过 构建 来 分 别 打 包 Component 的 HIML、 JavaScript、 

CSS 可 以 实现 当前 主流 浏览 器 的 兼容 ， 这 种 思路 实质 上 就 是 通 


过 构建 解析 和 创建 Shadow DOM 内 容 来 解析 Shadow DOM 结 
构 ， 而 不 是 让 浏览 器 直接 解析 Shadow DOM 结 构 。 


3.3 ”浏览 器 脚本 演进 历史 


我 们 知道 ， 目 前 前 端 浏 览 器 上 的 执行 脚本 以 JavaScript 为 主 。 但 是 
这 并 不 意味 着 我 们 在 任何 情况 下 都 可 以 直接 使 用 JavaScript 进 行 安 全 开 
发 ， 之 前 有 人 提出 JavaScript 设 计 中 糟糕 的 部 分 ， 还 有 人 读 过 
《JavaScript 语 言 精髓 》。 作 为 一 种 标准 化 的 语言 ， 竟 然 有 很 多 特性 被 
人 公然 地 握 弃 ， 十 分 不 可 思议 。 例 如 对 于 ECMAScript 5 及 以 前 的 
JavaScript 版 本 ， 虽 然 已 经 可 以 定义 使 用 严格 模式 了 ， 但 我 们 仍 会 听 到 
一 些 不 好 的 评价 ， 例 如 全 局 作用 域 、eval、with、 类 声明 缺失 等 不 合理 
的 特性 设计 ， 后 面 我 们 也 会 具体 讨论 这 些 问题 。 


name = 'ouven'; 
person = { 
name: name, 
address: 'China', 
job: "engineer '， 
city: 'Shenzhen', 
website: 'http://www.]jixianqianduan.com' 


}; 


with(person)t{ 


console.log(name, address, job, city, website); 


eval('alert(name)'); 


上 面 的 代码 在 非 严 格 模式 的 下 是 可 以 完美 运行 的 ， 但 是 并 不 合 
理 ， 全 局 变量 会 让 window 很 难 管理 ，with 会 降低 代码 执行 速度 、eval 的 
使 用 也 有 性 能 缺陷 。 尽 管 如 此 ， 在 不 同 的 时 代 背 景 下 我 们 仍 需要 合理 
的 解决 方案 来 处 理 和 避免 这 些 问 题 以 保证 开发 的 安全 性 。 乎 运 的 是 ， 
我 们 总 能 找到 一 些 解决 方案 来 应 对 当前 的 这 些 问 题 ， 先 来 看 看 曾经 盛 
极 一 时 的 CoffeeScript。 


3.3.1 ”CoffeeScript 时 代 


如 今 已 经 很 少 有 人 再 提起 CoffeeScript， 但 CoffeeScript 代 表 着 前 端 
脚本 语言 历史 上 的 一 段 辉 煌 时 期 。 CoffeeScript 是 一 套 可 转译 为 
JavaScript 语 法 的 语言 。 那 么 ， 既 然 已 经 有 了 JavaScript， 为 什么 还 会 
CoffeeScript 的 出 现 ? 早 在 JavaScript 规 范 混乱 的 时 代 ， 一 些 糟糕 的 设计 
不 仅 让 开发 的 代码 运行 不 稳定 ， 而 且 还 会 增加 大 型 项 目的 维护 难度 。 
像 前 面 提 到 的 全 局 变量 、 作 用 域 his、 图 数 参数 为 数组 对 象 、 类 声明 缺 
失 、 默 认 模 式 下 无 规范 限制 、 语 法 声明 宛 繁 等 特性 在 开发 过 程 中 尤其 
需要 注意 ,一 旦 处 理 不 完善 ， 就 可 能 导致 出 错 并 花费 大 量 的 时 间 去 排 
查 。 

此 CoffeeScript 的 创建 者 Jeremy Ashkenas 借 鉴 了 部 分 其 他 语言 简 
洁 、 开 发 高 效 的 特性 ， 重 新 定义 了 一 套 语法 规则 ， 然 后 按照 统一 的 规 
则 转译 成 规范 、 可 读 、 默 认 在 严格 模式 下 运行 的 JavaScript 代 码 ， 这 样 
就 有 效 地 保证 了 最 后 运行 的 JavaScript 代 码 是 具有 一 定 规 范 且 风 格 统一 
的 ， 而 CoffeeScript 本 身 定义 的 语法 规则 也 是 十 分 高 效 且 带 有 较 好 设计 


规范 的 。 尽 管 这 样 运行 时 需要 增加 转译 的 工作 ， 但 是 能 帮助 我 们 规避 
上 面 这 些 不 安全 的 问题 ， 是 很 有 价值 的 。 


下 面 来 看 一 些 CoffeeScript 特 性 ， 具 体 如 下 。 


# 赋 值 : 
number=1 
opposite=true 
# 条 件 : 


number=-1 if opposite 


# 节 数 : 


Square=(X) ->X*X 


# 数 组 : 


list=[1,2,3] 


# 存 在 性 : 


alert"I knew it!" if isknown? 


现在 CoffeeScript 也 可 以 直接 转译 为 ECMAScript 6 (后 面 将 会 具体 
介绍 ECMAScript 6 的 特性 ) 代码 ， 转 译 后 代码 如 下 。 


"USe strict'，; 


let number = 1; 


let oppsite = true; 


if(opposite)t 


number = -1; 


function square (x)t{ 


return x*x; 


let list = [1,2,3]; 


if(isKnown)t{ 


alert("I knew it!"); 


相 比 之 下 ，CoffeeScript 语 法 更 加 简洁 易 有 用， 限制 避免 了 eval、with 
这 类 不 安全 语法 的 使 用 。CoffeeScript 定 义 的 这 套 语 法 转译 规则 使 用 了 
更 加 简洁 高 效 的 编码 语法 来 转译 生成 严 着 安全 的 JavaScript， 因 此 也 受 
到 很 多 JavaScript 开 发 者 的 青睐 。 甚 至 有 人 曾 提 出 要 做 另 一 个 JVM 

(JavaScript Virtual Machine ，JavaScript 虚 拟 机 ) ， 和 希望 用 它 在 浏览 

上 直接 运行 CoffeeScript， 可 见 CoffeeScript 曾 经 是 多 么 的 盛 极 一 时 。 笔 
者 也 曾 维护 过 一 个 基于 CoffeeScript 的 项 目 ， 整 个 项 目 完全 使 用 
CoffeeScript 实现 ， 路 由 地 址 配置 代码 就 多 达 7000 多 行 ， 所 以 
CoffeeScript 在 只 有 ECMAScript 5 的 时 代 是 极 具 代表 性 的 。 


了 解 ECMAScript 6 标准 的 人 肯定 知道 上 面 例子 中 的 箭头 函数 。 随 
着 ECMAScript 6 标准 的 发 布 ， 更 加 标准 的 规范 和 同样 类 似 的 高 效 特性 


出 现 了 ， 此 外 ，ECMAScript 6 标准 还 补充 完善 并 增强 了 JavaScript 本 身 
的 运行 特性 。 CoffeeScript 因 此 开始 走向 没落 。 


3.3.2 ”ECMAScript 标准 概述 


首先 我 们 来 了 解 一 下 ECMAScript，ECMAScript 是 TC39 (Technical 
Committee 39， 技 术 专家 委员 会 39) 负责 制定 的 JavaScript 标 准 ， 其 发 展 
历史 如 下 。 


o ， 1999 年 12 月 ，ECMAScript 3 发布。 其 中 主要 定义 了 
ECMAScript 的 一 些 常 用 对 象 和 条 件 控制 语法 ， 例 如 内 置 对 
象 、 正 则 表达 式 、 条 件 控制 语法 、 异 常 处 理 、 错 误 定义 等 。 


o 2009 年 12 月 ，ECMAScript 5 标准 发 布 。 其 中 主要 新 增 了 严格 模 
式 ~ JSON 对 象 ~ 新 增 Object 接 口 ~ 新 | Array 接 口 ~ 
Function.prototype.bind 等 特性 。 


o 2015 年 6 月 17 日 ，ECMAScript 6 正式 发 布 。 其 中 增加 了 块 级 作 
用 域 变量 声明 规范 、String 模 板 、 解 构 、arrow 义 数 、Symbol 
类 型 、 类 、 和 迭代 器 、 生 成 器 、 集 合 、Promise、Proxy 等 特性 。 
这 也 是 CoffeeScript 开 始 走向 没落 的 一 个 转折 点 。 


o ， 2016 年 ，ECMAScript 7 发布 ， 主 要 增加 了 需 函 数 和 
Array.prototype.includes 特 性 。 


就 兼容 性 方面 而 言 ，Node 6.0 和 版 本 已 基本 支持 到 ECMAScript 6 
(93% 特 性 支持 ) ， 新 版 本 的 Node 也 支持 更 多 ECMAScript 6 以 上 的 新 
特性 。 浏 览 器 端 Chrome 52 已 完全 支持 ECMAScript 6， 并 逐渐 添加 了 对 


ECMAScript 7 特性 的 支持 ， 其 他 浏览 器 或 平台 也 在 陆续 添加 对 
ECMAScript 6 标准 的 支持 。 


在 工程 开发 实践 中 ，ECMAScript 6 的 应 用 也 很 快 被 推广 并 分 为 两 
个 方向 : 一 是 用 于 浏览 器 端 应 用 开发 ， 由 于 浏览 器 版 本 较 多 ， 需 要 将 
ECMAScript 6 转译 为 ECMAScript 5 的 语法 运行 ， 其 实 这 跟 CoffeeScript 
的 使 用 方式 是 一 样 的 ， 因 此 这 种 情况 下 ECMAScript 6 只 能 作为 语法 糖 
使 用 ， 实 际 运行 时 不 能 真正 使 用 到 新 版 本 标准 的 特性 ; 二 是 Node 端 的 
应 用 开发 ， 由 于 Node 环 境 对 新 版 本 特性 支持 较为 完善 ， 因 此 可 以 使 用 
ECMAScript 6 的 新 特性 ， 尤 其 是 对 于 完善 或 增强 类 特性 的 支持 ， 能 够 
大 大 提升 开发 效率 ， 完 善 功能 实现 效果 。 在 这 种 情况 下 ， 开 发 者 对 
CoffeeScript 的 使 用 慢 慢 减少 ， 渐 渐 转 向 遵循 规范 的 ECMAScript 6+ ( 泛 
指 ECMAScript 6 以 上 版 本 ) 标准 。 


3.3.3 ”TypeScript 概 况 


我 们 可 以 认为 ，JavaScript 除 了 主要 遵循 ECMAScript 6 十 标准 外 ， 
还 遵循 另 一 种 语法 规范 ， 即 TypeScript。 TypeScript 是 微软 在 2012 年 推出 
的 一 种 自由 开源 编程 语言 ， 是 JavaScript 的 一 个 超 集 。 尽 管 ECMAScript 
新 标准 和 草案 不 断 推 出 ， 但 TypeScript 依 然 存 在 ， 同 时 也 获得 了 不 少 追 


捧 者 。TypeScript 除 了 部 分 独 有 的 新 特点 外 ， 依 然 主要 遵循 ECMAScript 
6+ 标 准 的 规范 。 


TypeScript 相 对 于 ECMAScript 6 十 标准 的 差异 性 很 小 ， 大 部 分 与 
ECMAScript 6 十 保持 一 致 。 为 此 一 部 分 开发 者 在 接受 TypeScript 概 念 的 
欣喜 之 余 也 开始 反省 ，TypeScript 提 出 的 差异 性 特性 优势 并 不 明显 ， 在 


实现 ECMAScript 6 十 特性 支持 的 基础 上 增加 了 少数 特殊 应 用 场景 下 优 
势 的 内 容 。 当 然 ， 笔 者 个 人 觉得 TypeScript 今 后 的 发 展 仍 有 待 观察 。 


3.3.4 ”JavaScript 衍 生 脚 本 


什么 是 JavaScript 的 衍生 脚本 ? 目前 可 以 理解 为 基于 现 有 JavaScript 
的 实现 扩展 自己 特有 语法 规则 来 适应 特殊 应 用 场景 的 一 类 脚本 规范 。 
也 可 以 理解 为 JavaScript 的 超 集 ， 并 且 通 常 需 要 额外 支持 自身 特性 的 解 
析 器 来 转译 成 JavaScript 解 析 执 行 ， 例 如 JSX 或 HyperScript。 CoffeeScript 
和 TypeScript 在 某 种 意义 上 也 是 一 种 JavaScript 和 丛生 脚 本 ， 但 这 是 之 前 的 
版 本 了 ， 以 后 可 能 还 会 出 现 其 他 新 的 衍生 脚本 来 适应 相对 应 的 场景 。 


例如 JSX 语 法 的 官方 声明 ， 使 用 它 的 原因 是 其 定义 了 更 简洁 且 支 持 
对 应 DOM 属 性 的 树 状 结构 描述 语法 。 它 的 标记 规则 类 似 于 HTML ， 但 
解析 不 完全 一 样 。HyperScript 则 是 另 一 种 可 以 方便 创建 Virtual DOM 

(Virtual DOM， 也 叫 虚拟 DOM， 虚 拟 DOM 是 用 来 描述 HTML DOM 节 
点 之 间 属 性 和 对 应 关系 的 一 类 JavaScript 对 象 ， 通 常 在 内 存 里 是 一 个 简 
单 对 象 ， 通 过 特定 的 规则 解析 可 以 与 原 有 HTML DOM 进 行 对 应 的 转 
换 ， 在 后 面 的 章节 中 会 展开 介绍 ) 的 描述 性 脚本 语言 ， 也 是 JavaScript 
的 一 种 超 集 。 


但 是 不 管 怎么 样 ， 不 同 的 JavaScript 衍 生 脚 本 均 具 有 一 些 共性 。 
o 基于 JavaScript， 是 JavaScript 的 超 集 
o 适用 于 特定 的 场景 


o 具有 自己 的 规范 


o 可 以 按 一 定 的 规则 解释 运行 或 转译 成 JavaScript 运 行 


或 者 可 以 认为 ， 任 何 一 种 语言 的 新 版 本 都 是 前 一 个 版 本 的 衍生 脚 
本 。 是 否 遵循 语言 的 长 期 发 展 规 范 也 决定 着 这 个 衍生 脚本 规范 能 否 继 
续 下 去 。 例 如 CoffeeScript 的 出 现 衍生 了 ECMAScript 5 的 标准 语法 ， 
ECMAScript 6 规范 却 又 借鉴 了 CoffeeScript 的 部 分 特性 和 一 些 其 他 的 语 
言 优 势 然 后 将 CoffeeScript 淘 汰 。 这 也 说 明了 开发 过 程 中 遵循 语言 标准 
的 重要 性 ， 或 许 某 一 天 新 的 ECMAScript 标 准将 直接 支持 现在 衍生 脚本 
创建 Virtual DOM 功 能 的 语法 。 


O 


前 端 脚本 语言 的 演进 过 程 主要 包括 以 下 几 个 阶段 : ECMAScript 
5、CoffeeScript、ECMAScript 6+、TypeScript 和 衍生 脚本 。 本 节 中 我 们 
大 致 了 解 了 它们 的 特点 和 应 用 场景 ， 那 么 在 下 一 节 中 ， 我 们 将 重点 来 
介绍 JavaScript 标 准 在 实际 应 用 开发 中 的 特性 应 用 和 表现 。 


3.4 ” JavaScript 标准 实践 


JavaScript 标 准 自 确定 后 就 和 ECMAScript 有 着 密切 的 联系 ， 目 前 几 
平 所 有 的 JavaScript 代 码 都 遵循 ECMAScript 规 范 。 可 以 简单 理解 为 


归 : 五 二 扫 : 五 二 


JavaScript 是 语言 ，ECMAScript 则 是 语言 习惯 。 


如 果 将 JavaScript 比 作 英 语 ， 那 么 ECMAScript 标 准 可 以 理解 为 美 
式 英 语 ，TypeScript 则 可 以 理解 为 英 式 英语 。 它 们 大 部 分 的 语法 都 是 
相同 的 ， 但 仍 有 少 部 分 的 差异 ， 都 是 英语 的 使 用 标准 。 


这 一 节 中 ， 我 们 将 从 ECMAScript 5 开始 讲 起 ， 重 点 了 解 一 下 
ECMAScript 标 准 是 如 何 一 步 步 改 进 完善 的 。2009 年 12 月 ，ECMAScript 
5.0 版 正式 发 布 。Harmony 项 目 (Harmony 项 目 其 实 可 以 认为 是 未 被 发 布 
的 ECMAScript 4.0 版 本 ， 由 于 草案 发 生 分 歧 ， 最 后 被 命名 Harmony) 一 
分 为 二 : 一 些 较为 可 行 的 语言 特性 被 命名 为 JavaScriptnext 继 续 开 发 ， 
并 演变 成 后 来 的 ECMAScript 6; 另 一 些 不 是 很 成 熟 的 语言 特性 ， 则 被 
视 为 JavaScript.next.next 有 版本， 在 更 远 的 将 来 出 考虑 推出 。2015 年 6 月 17 
日 ，ECMAScript 6 正式 发 布 ， 因 此 ECMAScript 6 也 被 称 为 ECMAScript 
2015， 此 版 本 标准 在 原 有 的 ECMAScript 特 性 上 进行 了 较 大 的 修改 和 完 
善 ， 现 已 成 为 较为 通用 的 JavaScript 开 发 标准 。2016 年 ，ECMAScript 7 
发 布 。 下 面 逐 个 来 了 解 这 些 与 JavaScript 标 准 相 关 的 内 容 。 


3.4.1 ECMAScript5 


ECMAScript 5 于 2009 年 12 月 发 布 ， 内 容 主要 包括 严格 模式 、JSON 
对 象 、 新 增 Object 接 口 、 新 增 Array 接 口 和 Function.prototype.bind。 可 以 
认为 ECMAScript 5 规范 的 推出 在 原来 没有 规范 的 JavaScript 语 法 上 添加 
了 有 限 的 限制 标准 。 其 中 最 重要 的 一 条 可 能 就 是 严格 模式 的 提出 。 


严格 模式 


ECMAScript 5 严格 模式 的 提出 为 开发 者 提供 了 更 加 安全 规范 的 编 
程 范围 ， 限 制 了 原 有 一 些 不 规范 的 写法 ， 让 一 些 不 合理 的 语法 直接 报 
昔 ， 从 而 提高 了 代码 的 安全 性 和 规范 性 。 例 如 ， 在 严格 模式 下 ， 未 声 
明 的 全 局 变量 赋值 会 抛 出 ReferenceError， 而 不 是 默认 去 创建 一 个 全 局 
变量 ; 默认 支持 的 糟糕 特性 都 会 被 禁用 ， 使 用 with、eval 等 语句 执行 会 


抛 出 SyntaxError; 限制 了 函数 中 的 arguments 使 用 ， 严 格 模式 下 卫 数 内 
部 的 arguments.callee0 和 arguments.caller() 调 用 会 提示 Uncaught 
ReferenceError; 删除 系统 内 置 对 象 属性 、 对 象 已 冻结 (isFrozen) 的 属 
性 、 对 象 已 密封 〈isSealed) 的 属性 、 全 局 变量 或 var 定 义 的 变量 等 都 是 
不 允许 的 ， 否 则 会 报 Uncaught SyntaxError 错 误 ; 对 禁止 扩展 的 对 象 添 
加 新 属性 或 对 对 象 只 读 属 性 赋值 会 报 Uncaught TypeError; 国 数 参数 不 

能 有 重 名 的 情况 ， 否 则 会 报 Uncaught SyntaxError; 图 数 arguments 严 格 
定义 为 参数 ， 不 再 与 形 参 绑 定 ， 我 们 依然 不 建议 使 用 
arguments 变量 ;call/apply 的 第 一 个 参数 将 直接 传 入 不 自动 封装 为 对 
象 ; 对 象 属性 不 建议 有 重 名 的 况 发 生 ， 否 则 一 部 分 浏览 器 会 报 
Uncaught SyntaxError， 所 以 也 不 建议 出 现 。 具 体 来 看 下 面 的 这 些 例 
了 


"USe strict'，; 


myName = 'ouven'; // Uncaught ReferenceError: myName is not 
defined 
person = { // Uncaught ReferenceError: person is not 
defined 


name: myName, 

address: 'China', 

job: "engineer '， 

job: 'writer'，// 部 分 浏览 器 报错 : Uncaught SyntaxError 
city: 'Shenzhen', 

website: 'http://www.]jixianqianduan.com' 


}; 


with(person){ // Uncaught SyntaxError: Strict mode code may not 


include a with statement 
console.log(name, address, job, city, website); 
eval('alert(name) '); 


}; 


delete myName; // Uncaught SyntaxError: Delete of an 
unqualified identifier in strict 


mode. 


function sayHi(arguments)t{ // Uncaught SyntaxError: 
Unexpected eval or arguments in 
strict mode 


console.log( Hi ${arguments} ) ; 


需要 注意 的 是 ， 严 格 模 式 下 错误 的 提示 类 型 和 描述 在 不 同 浏览 
器 可 能 不 相同 ， 具 体 与 浏览 器 的 实现 有 关 。 


总 体 来 说 ， 严 格 模式 的 添加 消除 了 Javascript 语 法 的 一 些 不 合理 、 
不 严谨 之 处 ， 减 少 了 一 些 怪异 行为 ， 可 以 在 一 定 程度 上 提高 编译 器 效 
率 ， 加 快运 行 速度 ， 为 未 来 新 版 本 的 Javascript 标 准 化 做 了 铺垫 ， 这 是 
非常 有 意义 的 。 


JSON 


一 般 情 况 下 ， 我 们 使 用 JavaScript 语 言 解析 字符 串 为 JSJON 对 象 或 解 
析 JSON 对 象 为 字符 串 时 可 以 使 用 JSON.parse0 和 JSON.stringify0 ， 这 些 
用 法 相信 大 家 也 都 了 解 。 问 题 是 ， 我 们 要 知道 JSON 对 象 解析 不 是 伴随 
着 JavaScript 的 出 现 而 产生 的 。 例 如 在 比 IE8 更 低 版 本 的 浏览 器 中 不 能 直 
接 使 用 JSON 的 解析 方法 。 不 过 现在 我 们 通常 可 以 在 浏览 器 中 添加 es5- 
shim 来 增加 浏览 器 对 ECMAScript 5 功能 的 支持 ， 让 浏览 器 支持 JSON 对 
象 的 解析 ， 这 样 我 们 就 可 以 在 后 面 的 代码 中 放心 使 用 JSON.parse() 和 
JSON.stringify() 了 。 


<script src="//www.domain.com/es5-shim.js"></script> 


JSON 对 象 中 有 几 个 容易 混淆 的 方法 : JSON.stringify()、 
JSON.toString 0 、 JSON.valueOfO 、 JSON.toLocaleString() 。 
JSON.stringify0O 适 用 于 将 JSON 内 容 转 为 字符 串 ; JSON.valueOfO 用 于 获 
取 某 个 对 象 中 的 值 ; JSON.toString 0 被 调用 时 会 调用 Object 原型 上 的 
toString 方 法 ， 会 取得 JSON 对 象 的 值 并 转 为 字符 串 ， 如 果 没 有 具体 的 
值 ， 则 返回 原型 数组 ; JSON.toLocaleString 0 也 是 Object 原型 上 的 方 
法 ， 经 常会 返回 与 toString 0 相同 内 容 ， 但 对 于 Date 对 象 ， 
toLocaleString() 会 返回 格式 化 后 的 时 间 字 符 串 。 


JSON.stringify({name: 'ouven'}); // 输出 : "{"name":"ouven"}" 
JSON.toString({name: 'ouven'}); // 输出 : "[object 0bject]" 
JSON,valueof({fname : 'ouven'}); // 输出 : JSON 
{Symbol(Symbol.toStringTag): "JSON"} 对 象 

JSON .toLocaleString({na006De: ‘'ouven'}); // 输出 : "[object 


object]" 


let colors = ['red', 'blue', 'green']; 


console.log(colors.tostring()); // red, blue, green 
console.log(colors.valueof()); // ["red", "blue", 
"green"] 


console.log(colors.toLocaleString( )); // red, blue, green 


let date = new Date(); 

console.log(date.toString( )); // Thu Sep 08 2016 
10:07:50 GMT+0800 (中 国标 准时 间 ) 

console.log(date.valueof()); // 1473300470759 
console.log(date.toLocaleString());  // 2016/9/8 上 午 10:07:50 


新 增 Object 方 法 属性 


根据 ECMAScript 5 规范 文档 ，ECMAScript 5 标准 添加 了 较 多 Object 
原型 对 象 上 的 方法 。 


ECMAScript 5 标准 中 新 增 的 Object 方法 和 属性 如 下 ， Le RS 
管 这 些 新 增 的 Object 属性 或 方法 在 我 们 实际 的 业务 开发 中 并 不 一 
用 ， 但 如 果 要 自己 抽象 一 个 工具 类 或 者 实现 JavScript 库 ， ga 
它们 ， 这 里 读者 们 可 以 灵活 选择 。 


表 3-2 ECMAScript 5 Object 新 增 方法 


方 法 描 述 
getPrototypeOf 返回 一 个 对 象 的 原型 
getOwnPropertyDescriptor| 返 回 某 个 对 象 自 有 属性 的 属性 描述 符 


getOwnPropertyNames ”| 返回 一 个 数组 ， 包 括 对 象 所 有 自 有 属 ' 


集合 (包括 不 可 枚 举 的 属性 ) 


创建 一 个 拥有 指定 原型 和 若干 指定 属性 的 对 
create 名 


为 对 象 定 义 一 个 新 属性 ， 或 者 修改 已 有 的 属 
defineProperty 性 ， 并 对 属性 重新 设置 getter 和 setter， 这 里 
可 以 被 用 作 数 据 绑 定 的 对 象 劫持 用 途 


ea 在 一 个 对 象 上 添加 或 修改 一 个 或 者 多 个 自 有 
人 属性 ， 与 defineProperty 类 似 


锁定 对 象 。 阻 止 修改 现 有 属性 的 特性 ， 并 阻 
止 添加 新 属性 ， 但 是 可 以 修改 已 有 属性 的 值 


让 一 个 对 象 变 的 不 可 扩展 ， 也 就 是 不 能 再 添 


preventE.xtensions 


seal 

阻止 对 对 象 的 一 切 操作 和 更 改 ， 头 结对 象 将 
freeze se 

变 为 只 读 


加 新 的 属性 


isSealed 判断 对 象 是 否 被 锁定 
isFrozen 判断 对 象 是 否 被 冻结 


isExtensible | 判 判断 对 象 是 否 可 以 被 扩展 。 | 对 象 是 否 可 以 被 扩展 

re 可 枚 举 自身 属性 
es 

let colors = ['red', 'blue', 'green']; 

console.log(Object.getPprototypeof(colors)); // 


[Symbol(Symbol.unscopables): 0bject] 对 象 
console.log(Object.getOwnPropertyDescriptor(colors)); // 


undefined 
console.log(Object.getOwnPropertyNames(colors)); // ["0", "1", 
2 "length"] 


0bject.seal(colors); // 锁定 对 象 
0bject.freeze(colors); // 冻结 对 象 
0bject.preventExtensions(colors); // 阻止 扩展 


console.log(Object.isSealed(colors)); // true 
console.log(Object.isFrozen(colors)); // true 
console.log(Object.isExtensible(colors)); // true 


console.log(Object.keys(colors)); // ["0", "1", "2"] 


colors[2] = 'gray'; // Uncaught TypeError: Cannot assign to read 
only property '2' of object 

'[object Array]' 

colors[4] = 'gray'; // Uncaught TypeError: Can't add property 4, 
object is not extensible 

delete colors[2]; // Uncaught TypeError: Cannot delete 


property '2' of [object Array] 


新 增 Array 方 法 属性 


ECMAScript 5 标准 对 内 置 数 组 对 象 的 原型 方法 也 做 了 扩展 完善 ， 
主要 添加 了 下 列 常用 的 方法 ， 如 表 3-3 所 示 。 


表 3-3 ECMAScript 5 Array 新 增 方法 


ET as | 


| 返回 根据 给 定 元 素 找到 的 第 一 个 索引 值 ， 如 果 不 存在 则 返 
indexOf 


回 -1 

返回 指定 元 素 在 数组 中 的 最 后 一 个 索引 值 ， 如 果 不 存在 则 
lastIndexOf |、 反 回 -1 

1 et 


every 测试 数组 的 所 有 元 素 是 否 都 通过 了 指定 遂 数 的 测试 

some 测试 数组 中 的 某 些 元 素 是 否 通过 了 指定 

forEach “| 令 数组 的 每 一 项 都 执行 指定 的 孙 数 

Eo 返回 一 个 由 原 数组 中 每 个 元 素 调 用 某 个 指定 方法 得 到 的 返 


回 值 所 组 成 的 新 数组 ， 返 回 每 一 个 处 理 结果 
0 


0 
U 


开始 缩减 ， 最 终 缩减 为 一 个 值 


,mii 接受 一 个 函数 作为 累加 器 ， 数 组 中 的 每 个 值 从 右 到 左 ) 
1 
"8 开始 缩减 ， 最 终 缩减 为 一 个 值 


相 比 Object 新 增 的 内 容 ， 内 置 对 象 Array 新 增 的 这 些 方法 都 是 很 方 
便 很 常用 的 ， 为 对 数组 进行 操作 提供 了 便捷 ， 方 便 对 业务 数据 进行 处 
理 。 


let colors = ['red', 'blue', 'green', 'green']; 


console.log(colors.indexof('green')); // 2 


console.log(colors.1lastIindexOof('green')); // 3 


conSsole,1Log(colors.every(function(color){ 
return color .Jength >= 3; 


})); // true， 判 断 是 否 所 有 的 元 素 长 度 均 大 于 等 于 3 


console.log(colors.some(function(color)t{ 
return color.length > 4; 


})); // true， 判断 是 否 有 人 至少 一 个 元 素 长 度 大 于 4 


colors.forEach(function(color)t{ 
if(color === 'green')t{ 
console.1log(color); 


} 
}); // green green 


console.log(colors.map(function(color){ 
if(color === 'green')t{ 
return color; 


} 
})); // 输出 数组 : [undefined, undefined, "green", "green"] 


console.log(colors.filter(function(color)t{ 
if(color === 'green')t 
return color; 


} 
})); // 输出 数组 : ["green"，"green'"] 


console.log(colors.reduce(function(color, nextColor)t{ 


return color + ',' + nextColor 


})); // 输出 字符 串 : red, blue, green, green 


console.log(colors.reduceRight(function(color, nextColor)t{ 
return color + ',' + NextColor; 


})); // 输 出 字符 串 : green, green,blue,red 


Function.protptype.bind 


ECMAScript 中 新 增 的 函数 的 bind () 方 法 比较 常用 ，bind (0) 方 法 会 创 
建 一 个 新 孙 数 ， 称 为 绑 定 族 数 。 当 调用 这 个 绑 定 孙 效 时 ， 绑 定 图 数 会 
以 创建 它 时 传 入 bind () 方 法 的 第 一 个 参数 作为 his， 以 传 入 pind 0 方法 的 
第 二 个 以 及 以 后 的 参数 和 绑 定 函数 运行 时 本 身 的 参数 按照 顺序 作为 原 
水 数 的 参数 来 调用 ， 具 体 如 下 。 


fun.bind(thisArg[, argi[, arg2[,...]]]); 


其 实 JavaScript 中 重新 绑 定 this 变 量 的 了 国 数 方法 还 有 call0、apply0， 
不 过 bind0 显 然 与 它们 有 着 明显 的 不 同 ，bind0 会 返回 一 个 新 的 孙 数 ， 
并 将 传 入 的 参数 和 函数 绑 定 起 来 ， 而 call 0 或 applyO 则 是 使 用 新 的 this 去 
直接 调用 、 执 行 遂 数 。 


const fun = function(param) { 
console.log(this+ ':' +param) 
}; 
fun.call(this, 'ouven'); // " [object Window]:ouven" 


fun.apply(this, ['ouven']); // " [object Window]:ouven" 


let funNew = fun.bind('ouven', 'zhang ' ) ; 


funNew(); // 'ouven:zhang' 


String.protptype.trim、 Date.now()、Date().toJSON 


console.log(' ouven zhang '.trim()); // "ouven zhang" 
console,1og(Date.now() )， // 返回 当前 时 间 戳 ， 如 
1473303676336 

console.log((new Date()).toJSON()); // "2016-11- 


21T02:59:28.5992" 


总 体 来 说 ，ECMAScript 5 增加 的 特性 相对 不 多 ， 主 要 是 对 之 前 语 
法 的 完善 ,但 大 多 新 增 内 特性 都 是 很 实用 的 ， 相 信 大 部 分 大 家 都 已 经 
熟悉 了 。 接 下 来 我 们 重点 看 一 下 ECMAScript 6 标准 的 新 特性 和 一 些 需 
要 注意 的 问题 。 


3.4.2 ECMAScript 6 


ECMAScrtipt 6 于 2015 年 6 月 17 日 正式 发 布 ， 也 被 命名 为 
ECMAScript 2015。 早 在 草案 制定 阶段 ，ECMAScript 6 特性 就 被 部 分 开 
发 者 应 用 在 实际 项 目 中 。ECMAScript 6 借鉴 了 ECMAScript 5 和 其 他 语 
言 的 特性 ， 并 在 此 基础 上 进行 了 补充 和 增强 ， 最 终 形成 了 一 套 完 整 的 
特性 集合 ， 使 得 JavaScript 语 言 规范 更 加 高 效 、 严 说 、 完 善 。 例 如 字符 
串 模板 、 人 集合、 箭头 函数 、Promise、for..of 循 环 等 均 是 借鉴 其 他 语言 
的 优秀 特性 而 增加 的 功能 点 ，class 类 和 import/export 模 块 规范 则 可 以 认 
为 是 对 原 有 ECMAScript 标 准 缺 失 特 性 的 补充 ， 和 迭代 器 、 生 成 器 、 解 构 


赋值 、 阔 效 参数 等 可 认为 是 对 原 有 标准 特性 的 增强 。 这 里 我 们 将 用 简 
短 的 篇 幅 来 向 大 家 介绍 ECMAScript 6 新 增 的 核心 特性 的 使 用 方法 和 实 
际 开发 中 需要 注意 的 地 方 。 


块 级 作用 域 变量 声明 关键 字 let、const 


const b = 'hello'; 


let c = 'c'，; 
const d; // Uncaught SyntaxError: Missing initializer in 
const declaration 


3 


console.log(c); // Uncaught ReferenceError: c is not defined 


b = 'world'; // Uncaught TypeError: Assignment to constant 
variable. 
console.log(window.a || global.a); // undefined 


console.log(window.A || global.A); // 2 


有 几 个 需要 注意 的 地 方 : 一 是 let 和 const 都 只 能 作为 块 级 作用 域 变 
量 的 声明 ， 且 只 能 在 块 作用 域内 生效 ， 块 内 声明 的 变量 无 法 在 块 级 外 
层 引 用 ; 二 是 使 用 const 声 明 的 变量 必须 进行 初始 化 赋值 ， 而 且 一 旦 赋 
值 就 不 能 再 进行 二 次 修改 赋值 ; 三 是 使 用 let、const 在 全 局 作用 域 下 声 


明 的 变量 不 会 作为 属性 添加 到 全 局 作用 域 对 象 里 面 ， 这 点 和 var 是 不 同 
的 ; 四 是 通过 测试 ， 使 用 let、const 赋 值 语句 的 执行 速度 比 使 用 var 快 约 
65% 左 右 。 所 以 ， 我 们 除了 知道 使 用 let 和 const， 也 需要 了 解 lt 和 const 
使 用 场景 的 区 别 : 模块 内 不 变 的 引用 和 常量 ,一 般 使 用 const 定 义 ; 可 
变 的 变量 或 引用 使 用 let 声 明 ; var 仅 用 于 声明 函数 整个 作用 域内 需要 使 
用 的 变量 。 


字符 串 模板 


字符 串 模 板 设计 主要 来 自 其 他 语言 和 前 端 模板 的 设计 思想 ， 即 当 
有 字符 串 内 容 和 变量 混合 连接 时 ， 可 以 使 用 字符 串 模 板 进行 更 高 效 的 
代码 书写 并 保持 代码 的 格式 和 整洁 性 。 如 果 没 有 字符 串 模板 ， 我 们 依 
然 需 要 像 以 前 一 样 借助 * 子 符 串 十 操作 符 ? 拼 接 或 数组 join() 方 法 来 连接 


多 个 字符 串 变 量 。 


let name = 'ouven'; 

let str = ‘<h2>hi, ${name}</h2> 
<p>hello, world!</p> 
<p>2016-12-12</p> 


要 注意 的 是 ， 字 符 串 模板 不 会 压缩 内 部 的 换行 与 空格 ， 而 是 按照 
原 有 的 格式 输出 ， 只 将 变量 内 容 填充 替换 掉 。 实 际 的 项 目 开发 中 ， 如 
果 使 用 ECMAScript 6 的 转译 工具 将 ECMAScript 6 的 代码 处 理 生成 
ECMAScript 5 的 代码 后 运行 ， 格 式 可 能 丢失 ， 因 为 ECMAScript 5 及 之 
前 的 版 本 中 字符 串 是 没有 字符 串 模板 格式 的 。 


解构 赋值 


个 人 认为 ， 解 构 赋 值 是 ECMAScript 6 的 一 个 亮点 功能 ， 它 解决 了 
赋值 的 编码 元 余 和 模块 按 需 导 出 的 问题 。 解 构 赋 值 主 要 分 为 数组 解构 
和 对 象 解构 。 


let [a, b, c] = [11, 22]; 


let {one, two, three} = {two:2, three:3, one:1}; 


[a，b] = [b，a]; // 交换 a、b 变量 的 值 


console.log(c); // undefined 


这 里 数组 解构 是 严格 按照 数组 下 标 依次 对 应 顺序 赋值 的 ， 如 果 赋 
值 的 常量 个 数 不 够 ， 则 对 应 下 标的 变量 默认 为 undefined; 如 果 常 量 个 
数 超出 ， 则 多 余 的 会 被 舍弃 ， 所 以 顺序 很 重要 ;而 对 象 解构 赋值 则 是 
根据 对 象 引 用 的 键 名 来 进行 赋值 的 ， 可 以 无 视 顺 序 。 另 外 ， 如 果 某 个 
变量 已 经 被 声明 ， 就 不 能 再 参加 解构 赋值 了 ，JavaScript 执 行 引 擎 会 把 
它 当 作 重 复 声明 处 理 ， 而 ECMAScript 6 中 任何 变量 的 重复 声明 是 绝对 
不 允许 的 ， 所 以 会 直接 提示 Uncaught TypeError 错 误 。 


数组 新 特性 


ECMAScript 6 也 为 数组 内 置 对 象 添加 了 较 多 的 新 特性 ， 主 要 包 
括 ... 复 制 数组 和 新 增 的 数组 API。 


const arr = ['ouven' , 'zhang' ] ，; 


const newArr = [...arr]; //['ouven' , 'zhang' | 


需要 注意 的 是 ， 这 里 的 ... 进 行 的 数组 复制 是 浅 拷贝 〈 关 于 深 拷 贝 
和 浅 拷贝 的 区 别 此 处 不 再 费 述 ) ， 而 新 增 的 数组 方法 则 主要 包括 以 下 
几 种 ， 如 表 3-4 所 示 。 


表 3-4 ECMAScript 6 数组 新 增 方法 


方 ; 描 述 
用 于 将 类 数组 对 象 (包括 对 象 [array-like 
object] 和 可 遍历 对 象 ) 转化 为 真正 的 数组 


Array.from 


Array.of | 可 以 将 传 入 的 一 组 参数 值 转换 为 数组 
可 以 在 当前 数组 内 部 将 指定 位 置 的 数组 项 
Array.prototype.copyWithin| 复 制 到 其 他 位 置 ， 然 后 返回 当前 数组 ， 使 
用 copyWithin 方 法 会 修改 当前 数组 


Re 使 用 给 定 值 ， 填 充 一 个 数组 ， 会 改变 原来 
Ue 的 数组 


用 于 找 出 第 一 个 符合 条 件 的 数组 元 素 ， 有 
点 类 似 于 filter 


Array.prototype.find 


hayproospe nanaee | 入 天 人 和 于 和 和 人 人 人 
Array.prototype.findIndex 置 


除 此 之 外 ，ECMAScript 6 中 还 添加 了 更 多 关于 数组 迭代 的 方法 : 
entries ()、 keys() 和 values ()， 均 可 用 来 遍历 数组 。 它 们 都 返回 一 个 迭代 
器 对 象 ， 也 可 以 用 for...of 循 环 进行 遍历 ， 区 别 是 keys () 是 对 数组 键 名 进 
行 遍 历 、values 0 是 对 数组 键 值 进行 遍历 ，entries 0 是 对 数组 中 键 值 对 
进行 遍历 ， 另 外 Array.prototype[Symbol.iterator] 也 可 以 用 来 获取 遍历 数 
组 对 象 的 迭代 器 。 


let colors = ['red', 'blue', 'green', 'green']; 


console.1log(Array.from(colors)); // ["red", 
"green"] 
console.log(Array.of('red', "blue '， green 


[ red'"， "blue", "green", 


"green"] 


console.log(colors.find(function(color) { 
if (color === 'green') { 
return color; 


} 
})); // green 


console.log(colors.findIndex(function(color) { 
if (color === 'green') { 
return color; 


1) YA 


"blue", "green", 


'green' )); // 


console.1log(colors.fill('black' )); // 会 改变 colors 的 值 ， 


["black", "black", "black", 
"plack"] 


// 恢复 原 数 组 后 再 操作 
colors = ['red', 'blue', 'green', 'green']; 


console.log(colors.copywithin(0, 3)); // 


["green", "blue", 


"green", "green'"] 


console.log(colors.keys()); // 输出 ArrayIterator {} 对 象 


console.log(colors.entries()); // 输出 ArrayIterator {} 对 象 


ECMAScript 6 对 函数 参数 进行 了 新 的 设计 ， 对 原 有 函数 参数 设计 
糕 的 部 分 进行 改善 ， 主 要 添加 了 默认 参数 、 不 定 参 数 和 拓展 参数 。 


// 默认 参数 
function sayHi(name = 'ouven'){ 


console.log( Hello ${name}. ); 


} 
sayHi( ); // Hello ouven 


// 不 定 参 数 
function sayHi(...name)t{ 
// 这 里 name 的 值 为 ['ouven'，'zhang'] 
console.log(name.reduce((a,b)=> Hello ${a} ${b} )); 
} 


sayHi('ouven', 'zhang'); // Hello ouven zhang 


// 扩展 参数 


let name = ['ouven'，'zhang '] ; 


function sayHello(name1, name2)t{ 


console.1log( Hello ${name1} ${name2} ); 


sayHello(...name); // Hello ouven zhang 


通过 实例 大 家 应 该 都 掌握 了 这 些 方法 ， 其 中 不 定 参数 和 扩展 参数 
可 以 认为 恰好 是 相反 的 两 个 模式 ， 不 定 参 数 是 使 用 数组 来 表示 多 个 参 
数 ， 扩 展 参 数 则 是 将 多 个 参数 映射 到 一 个 数组 。 同 时 也 有 几 个 地 方 需 
要 注意 ， 这 里 不 定 参 数 的 ... 和 数组 复制 的 ... 是 有 区 别 的 ， 不 定 参 数 可 
以 使 用 函数 的 形 参 来 表示 所 有 的 参数 组 成 的 列表 。 以 前 的 arguments 变 
量 也 有 类 似 的 作用 ， 但 是 arguments 不 是 真正 的 数组 ， 除 了 存放 参数 的 
列表 外 ，arguments 还 有 length 属 性 ， 严 格 来 说 arguments 是 一 个 类 数组 对 
象 ， 而 不 定 参 数 则 是 一 个 完全 的 数组 ， 这 也 是 不 定 参 数 相对 于 
arguments 的 优势 ， 更 加 方便 我 们 使 用 ， 所 以 建议 使 用 不 定 参 数 来 代替 
arguments。 当然 ， 如 果 在 ECMAScript 6 中 定义 了 "use strict ，arguments 
的 使 用 也 基本 被 限制 了 ， 所 以 我 们 应 该 尽量 使 用 新 的 遂 数 参数 。 


箭头 函数 


箭头 函数 的 设计 来 自 于 CoffeeScript 等 语言 的 特性 ，ECMAScript 6 
标准 中 也 添加 了 这 个 特性 ， 让 短 国 数 的 声明 更 加 方便 。 
// 箭头 函数 


[1, 2, 3].forEach((x) => x * x); 


人 人 


console.1log('Hello ouven zhang.'); // Hello ouven zhang. 


})(); 


需要 注意 的 是 ， 葡 头 孙 数 没 有 完整 的 执行 上 下 文 ， 因 为 其 his 和 外 
层 的 this 相 同 ， 可 以 理解 为 它 的 执行 上 下 文 只 有 变量 对 象 和 作用 域 链 ， 
没有 this 值 。 


在 JavaScript 中 ， 代 码 的 执行 上 下 文 由 变量 对 象 、 作 用 域 链 和 this 
值 组 成 。 但 箭头 图 数 与 外 层 执 行 上 下 文 共 享 this 值 。 如 果 需 要 创建 具 
有 独立 上 下 文 的 函数 ， 就 不 要 使 用 箭头 函数 。 


增强 对 象 


在 ECMAScript 6 中 ， 对 象 的 使 用 变 得 更 加 方便 。 你 可 以 在 定义 对 
象 时 通过 属性 简写 、 变 量 作 为 属性 名 或 省 略 对 象 函 数 属性 的 书写 等 方 
式 来 提高 编码 的 效率 。 下 面 的 书写 方式 就 简洁 多 了 。 


const name = 'ouven'，; 


const people = { 
// 属性 简写 
name, 
// 返回 变量 或 对 象 作为 属性 名 
[getkey('family' )]: "zhang '， 
// 对 象 方法 属性 简写 声明 


sayHi( ){ 
console.log( “Hello ${this.name} ${this.family}. ); 


people.sayHi(); // Hello ouven zhang 


function getkey(key)t 


return key; 


没有 太 多 需要 注意 的 地 方 ， 但 为 了 使 代码 便于 维护 和 理解 ， 
还 是 建议 尽量 不 将 变量 或 对 象 作 为 对 象 的 属性 名 ， 这 样 不 容易 阅读 。 


站 
由 
六 


JavaScript 没 有 类 这 一 点 一 直 是 ECMAScript 设 计 里 比较 糟糕 的 地 
方 ， 这 也 导致 了 在 ECMAScript 6 以 前 定义 类 的 方法 以 及 类 的 继承 方式 
多 种 多 样 。 就 类 的 继承 方式 来 说 ， 基 本 思路 就 有 原型 链 继承 、 构 造 函 
数 继 承 、 实 例 继 承 和 拷贝 继承 几 种 ， 但 每 种 方法 多 多 少 少 都 有 上 自己 的 
缺陷 ， 因 为 它们 都 不 是 真正 的 类 继承 ， 例 如 会 出 现 子 类 不 一 定 是 父 类 
的 实例 、 子 类 和 父 类 共享 一 个 实例 等 糟 料 的 情况 。ECMAScript 6 添加 
了 class 关 键 子 ， 一 切 便 都 有 章 可 循 了 。 


class Aminalf{ 


constructor() { 


Lh es 


class People extends Aminalf{ 
constructor(contents = {}) { 
super(); 
this.name = contents.name; 


this.family = contents.family; 


} 
sayHi() { 

console.log( “Hello ${this.name} ${this,.family}. ); 
} 


let boy = new People({ 
name: 'ouven', 
family: 'zhang' 
}); 


boy.sayHi(); // Hello ouven zhang 


当然 有 了 class， 就 有 extends， 对 于 开发 者 来 说 ， 使 用 class 很 大 的 
好 处 是 实现 一 个 类 的 代码 模块 只 能 在 一 个 地 方 定义 ， 想 想 以 前 我 们 可 
以 在 代码 中 的 任意 位 置 去 扩展 基 类 的 prototype 属 性 ， 从 某 种 意义 上 来 
说 ，class 类 声明 解决 了 这 个 之 前 设计 糟糕 的 地 方 ， 对 代码 的 规范 性 和 
严谨 性 都 提出 了 更 好 的 限制 方案 。 


模块 module 


ECMAScript 6 引入 了 模块 引用 规范 ， 这 也 是 之 前 语言 标准 上 没有 
的 。 这 样 现 有 的 JavaScript 模 块 化 规范 又 多 了 一 种 选择 : import/exporto 


// 简 单 的 模块 导入 导出 示例 
Import {sayHi} from'./people'; 


export default sayHi; 


需要 注意 的 是 ， 使 用 default 导 出 时 要 尽量 将 其 他 模块 需要 使 用 的 部 
分 属性 导出 ， 不 要 导出 整个 对 象 ， 因 为 这 样 会 导出 一 些 不 需要 的 东 
西 ， 如 果 使 用 模块 按 需 内 容 导 出 ， 部 分 ECMAScript 6 的 打包 工具 可 以 
使 用 静态 树 分 析 的 方法 来 自动 移 除 程序 运行 时 不 需要 的 代码 ， 例 如 支 
持 Tree-shaking 实 现 方 式 的 思路 ， 将 原 有 代码 中 未 被 导出 或 未 使 用 到 的 
代码 部 分 作为 无 效 代 码 移 除 掉 ， 这 样 在 开发 后 期 模块 打包 优化 的 时 候 
就 很 有 用 了 。 


JavaScript 之 前 的 模块 化 规范 比较 多 ， 包 括 AMD 、CMD 、 
CommonJs， 现 在 又 多 了 ECMAScript 6 的 import/export。 所 以 为 了 统 
一 ， 选 择 模 块 开 发 规范 时 应 尽量 遵循 语言 标准 的 特性 。 


循环 与 迭代 器 Iterator 


到 了 ECMAScript 6 阶段 ，JavaScript 实 现 循环 的 方式 就 比较 多 了 ， 
除了 do...while、for 循 环 ， 还 可 以 使 用 for...in 来 遍历 对 象 (注意 不 要 用 


for...in 来 遍历 数组 ， 因 为 遍历 出 来 的 键 不 是 数字 ， 而 且 在 部 分 浏览 器 中 
会 产生 乱 序 ) 。 如 果 遍 历数 组 的 话 ， 则 可 以 使 用 for..of、map、 
forEach ， 需 要 注意 的 是 ， 使 用 map、forEach 这 类 方式 的 一 个 好 处 是 将 
循环 遍历 的 数组 元 素 指 定 到 一 个 具体 的 处 理 遂 数 中 进行 处 理 ， 这 样 的 
疯 数 一 般 是 个 纯 闵 数 ， 但 缺陷 是 用 它 时 不 能 直接 跳出 整个 循环 ， 只 能 
跳出 当前 单 步 循环 。 所 以 数组 循环 遍历 最 佳 方式 是 for..of， 此 外 for..of 
也 可 以 用 来 遍历 Map、Set、WeakMap、WeakSet 等 集合 。Interator 和 迭代 
器 的 加 入 则 让 遍历 数组 、 对 象 和 集合 的 方式 更 加 灵活 可 控 ，Interator 可 
以 控制 每 次 单 步 循环 触发 的 时 机 ， 不 用 一 次 遍历 所 有 的 循环 。 


纯 遂 数 一 般 指 返 回 值 完全 由 传 入 的 参数 来 决定 的 水 数 ， 即 对 于 
同一 个 参数 输入 ， 在 任何 情况 下 的 函数 返回 结果 都 是 相同 且 唯 一 
的 。 例 如 数组 的 slice0 可 以 认为 是 一 个 纯 国 数 ， 而 random0 则 不 是 纯 
国 数 。 


以 数组 遍历 为 例 〈 其 他 对 象 遍 历 的 方法 与 此 类 似 ) ， 我 们 先 看 一 
下 直接 迭代 的 方式 和 用 Iterator 和 迭代 器 实现 的 方式 有 什么 区 别 。 


// for.. .of 遍历 实现 


const numbers = [1, 2, 3, 4, 5]; 


for(let number of numbers)t{ 


console.1log(number ); 


// 迭代 器 遍历 数组 


const numbers = [1, 2, 3, 4, 5]; 


let iterator = numbers[Symbol.iterator](); 
let result = iterator.next(); 


console.log(result.value); //1 


//...doSsomething1 
result = iterator.next(); 


console.log(result.value); //2 


//...doSsomething2 
result = iterator.next(); 


console.log(result.value); //3 


//...doSsomething3 
result = iterator.next(); 


console.log(result.value); //4 


//...doSsomething4 
result = iterator.next(); 


console.log(result.value); //5 


相信 大 家 很 快 便 看 懂 Interator 和 for...of 的 区 别 了 。 JInterator 可 以 在 循 
环 开始 后 任意 的 地 方 进 行 数组 的 单 步 循 环 ， 当 循环 迭代 中 每 次 单 步 循 
环 操作 都 不 一 样 时 ， 使 用 Interator 就 很 有 用 了 。 如 果 使 用 for...of 则 需 
不 断 判断 执行 的 次 数 来 执行 不 同 的 单 步 循 环 。 需 要 注意 的 是 ， 这 里 也 


可 以 使 用 Interator 来 循环 一 次 性 遍历 数组 所 有 的 元 素 ， 每 次 Tterator 调 用 
next() 都 会 返回 一 个 对 象 {done: false, value: item}，done 属 性 是 boolean 
值 ， 表 示 循 环 遍 历 是 否 完 成 ，value 则 是 每 一 步 nextO 调 用 获取 到 的 值 。 


如 图 3-6 所 示 ， 为 了 方便 理解 ， 我 们 可 以 把 Interator 理 解 成 为 数组 或 
对 象 上 的 一 个 根据 偏 移 来 访问 内 存 内 容 的 游标 对 象 ， 每 次 调用 next()， 
遍历 游标 会 向 后 移动 一 个 地 址 。 另 外 ，Symbol.iterator 的 方法 属性 是 在 
Object 原型 上 的 ， 所 以 可 以 用 来 遍历 一 切 可 循环 遍历 的 对 象 。 


_next 人 .next() .next () 


array[0] array[1] array[2] array[3] 


3-6 ”Interator 调 用 运行 示意 


生成 器 Generator 


如 果 对 Iterator 理 解 较 深 的 话 ， 那 么 你 会 发 现 生 成 器 Generator 和 
Interator 的 流程 是 有 点 类 似 的 。 但 是 ，Generator 不 是 针对 对 象 上 内 容 的 
遍历 控制 ， 而 是 针对 函数 内 代码 块 的 执行 控制 ， 如 果 将 一 个 特殊 函数 
的 代码 使 用 yield 关 键 字 来 分 割 成 多 个 不 同 的 代码 段 ， 那 么 每 次 
Generator 调 用 next() 都 只 会 执行 yield 关 键 字 之 间 的 一 段 代 码 。 Generator 
可 以 认为 是 一 个 可 中 断 执 行 的 特殊 函数 ， 声 明 方 法 是 在 图 数 名 后 面 加 
上 米 来 与 普通 水 数 区 分 。 上 面 数 组 遍历 的 例子 ， 使 用 Generator 书 写 如 
下 。 


const generator = function* (){ 
const numbers = [1, 2, 3, 4, 5]; 
for(let number of numbers ){ 


yield console.1Log(Cnumber ) ， 


let result = generator(); 


result.next(); // 1 
//,.. .doSomething 
reSsult.next(); // 2 
//,.. .doSomething 
reSsult.next(); // 3 
//...doSsomething 
result .next(); // 4 
//.. .doSomething 
result.next(); // 5 


代码 很 浅显 易 懂 ， 不 过 需要 注意 的 是 ，Generator 遇 到 yield 关 键 字 
会 暂停 往 后 执行 ， 但 并 不 表示 后 面 的 程序 就 不 执行 了 。 如 果 
console.log(number) 是 一 个 耗 时 的 工作 ， 那 么 程序 只 在 Generator 里 面 暂 
停 ， 外 面 的 程序 仍 会 继续 执行 ， 举 例如 下 。 


const generator = function* (){ 
const numbers = [1, 2, 3, 4, 5]; 
for(let number of numbers ){ 


yield setTimeout(function(){ 


console.1log(number ) ， 


}, 3000); 


let result = generator(); 
let done = result.next(); 
while(!done,done){ 


done = result.next(); 


} 


console.log('finish'); 


执行 上 述 代 码 会 先 输出 finish， 然 后 才 打 印 数 字 ， 结 果 如 下 。 


这 样 不 就 可 以 用 来 控制 多 个 异步 操作 了 吗 ! 尤其 对 于 Node 服 务 端 
处 理 浏 览 器 的 请 求 ， 这 样 来 处 理 异步 显得 更 为 优雅 。 


总 结 一 下 实现 数组 或 对 象 循环 遍历 的 方法 : for、 


while(do...while)、forEach、 map、reduce、for...of、for...in、 Iterator、 


Generator。 除 了 这 些 可 用 的 方式 ， 大 家 也 要 尽量 去 了 解 实 现 这 些 循 
环 的 差异 性 和 对 应 的 应 用 场景 。 到 目前 为 止 ， 推 荐 使 用 for..of 或 
for...in 来 处 理 大 多 数 的 循环 遍历 场景 。 


集合 类 型 Map+Set+WeakMap+WeakSet 


也 许 很 多 人 会 疑惑 ， 既 然 数组 和 对 象 可 以 存储 任何 类 型 的 值 ， 为 
什么 还 需要 Map 和 Set 呢 ? 考虑 几 个 问题 : 一 是 对 象 的 键 名 一 般 只 能 是 
字符 串 ， 而 不 能 是 另 一 个 对 象 ; 二 是 对 象 没有 直接 获取 属性 个 数 等 这 
些 方 便 操作 的 方法 ; 三 是 我 们 对 于 对 象 的 任何 操作 都 需要 进入 对 象 的 
内 部 数据 中 完成 ， 例 如 查找 、 删 除 某 个 值 必须 循环 遍历 对 象 内 部 的 所 
有 键 值 对 来 完成 。 总 之 我 们 使 用 简单 对 象 的 方式 仍然 显得 很 低 效 ， 没 
有 一 个 高 效 的 方法 集 来 管理 对 象 数 据 。 因 此 ECMAScript 6 增加 了 Map、 
Set、WeakMap、WeakSet， 试 图 弥补 这 些 不 足 。 这 样 我 们 就 可 以 使 用 
它们 提供 的 has、add、delete、clear 等 方法 来 管理 和 操作 数据 集合 ， 而 
不 用 具体 进入 到 对 象 内 部 去 操作 了 ， 这 种 情况 下 Map 和 Set 就 类 似 一 个 
可 用 于 存储 数据 的 黑 盒 ， 我 们 只 管 向 里 面 高 效 存 取 数 据 ， 而 不 用 知道 
它 里 面 的 结构 是 怎样 的 。 我 们 甚至 可 以 这 样 理 解 : 集合 类 型 是 对 对 象 
的 增强 类 型 ， 是 一 类 使 数据 管理 操作 更 加 高 效 的 对 象 类 型 。 


如 果 一 定 要 对 应 来 看 ，Set 可 以 认为 是 增强 的 数组 类 型 ，Map 则 可 
以 认为 是 增强 的 对 象 类 型 ，WeakSet 和 WeakMap 则 对 应 着 Set 和 Map 的 优 
化 类 型 ， 所 以 某 种 程度 上 上， 为 了 让 程序 开发 更 加 方便 ， 我 们 有 必要 引 
入 集合 这 类 更 为 高 效 的 类 型 。WeakSet 和 WeakMap 在 生成 时 有 更 加 严格 
的 限制 : WeakSet 只 存储 对 象 类 型 的 元 素 ， 不 能 遍历 ， 没 有 size 属 性 ; 


WeakMap 只 接受 基本 类 型 的 值 作 为 键 名 ， 没 有 keys、values、entries 等 
遍历 方法 ， 也 没有 size 属 性 。 


let ws = new WeakSet() 
ws.add({ data: 42 }); 


let wm = new WeakMap(); 
wm.set('key', { data: 42 }); 
// .. ,这 里 不 再 一 一 列举 它们 的 具体 用 法 


需要 注意 的 是 ，Map 和 Set 都 为 内 部 的 每 个 键 或 值 保持 了 强 引 
用 ， 也 就 是 说 ， 如 果 一 个 存储 的 属性 元 素 被 移 了 除了， 回收 机 制 可 能 
无 法 回收 它 占 用 的 内 存 ， 容 易 造成 内 存 泄露 ， 所 以 我 们 使 用 时 要 尽 
可 能 先 删除 引用 的 相关 内 容 。 相 比 之 下 ， 使 用 weakSet 和 WeakMap 则 
会 出 现 上 述 情况 ， 因 为 它们 并 不 使 用 强 引 用 。 再 总 结 一 下 
JavaScript 可 能 出 现 内 存 泄 露 的 常见 场景 : 闭 包 图 数 、 全 局 变量 、 对 
象 属性 循环 引用 、DOM 节 点 删除 时 未 解 绑 事 件 、Map 和 Set 的 属性 直 
接 删 除 。 和 希望 大 家 同时 也 要 明白 上 述 五 种 场景 的 具体 情况 是 怎么 样 
的 。 


Promise、Symbol、Proxy 增 强 类 型 


Promise 


接触 过 Promise 的 都 知道 ，Promise 可 以 用 来 避免 异步 操作 因数 里 的 
多 层 主 套 回调 (callback hell) 问题 ， 因 为 解决 多 层 异步 场景 最 直接 的 
方法 是 回调 能 套 ， 将 后 一 个 操作 放 在 前 一 个 操作 的 异步 回调 里 ， 但 如 
果 操 作 层 数 多 了 ， 就 会 很 难 管理 。 


Promise 的 出 现 很 好 地 解决 了 这 一 问题 ，Promise 代 表 一 个 异步 操作 
的 执行 返回 状态 ， 这 个 执行 返回 状态 在 Promise 对 象 创 建 时 是 未 知 的 ， 
它 允 许 为 异 步 操 作 的 成 功 或 失败 指定 处 理 方 法 。 目 前 Promise 实 现 的 方 
式 较 多 ， 一 般 将 这 些 Promise 实现 的 规范 分 为 Promise/A 规范 和 
Promise/A+ 规 范 ， 通 常 我 们 认为 Promise/A 十 规范 是 在 Promise/A 规 范 的 
基础 上 进行 修正 和 增强 形成 的 ， 更 具有 规范 性 。 


我 们 怎样 区 分 Promise/A 十 规范 和 Promise/A 规 范 呢 ? 


o ”符合 Promise/A 十 规范 的 promise 实 现 一 般 以 then 方 法 为 交互 核 
心 。Promise/A 十 维护 组 织 也 会 去 解决 Promise 中 新 发 现 的 问题 
并 改进 完善 规范 ， 因 此 Promises/A 十 规范 相对 来 说 更 加 稳定 。 


o ”Promise/A 十 规范 要 求 onFulfilled 或 onRejected 返 回 promise 后 的 
处 理 过 程 必 须 是 作为 水 数 来 调用 ， 而 且 调 用 过 程 必 须 是 异 : 
的 。 


o ”Promise/A 十 规范 严格 定义 了 then 方 法 链 式 调用 时 onFulfilled 或 
onRejected 的 调用 顺序 。 


判断 是 否 为 Promise/A 十 规范 主要 看 Promise 方 法 是 否 含有 new 
Pomise(function(resolve, reject) {})、then、resolve、all 等 方法 。 另 外 
ECMAScript 6 中 Promise 的 实现 严格 遵循 了 Promise/A+ 规 范 ， 而 jQuery 
中 的 Deferred 就 不 是 Promise/ A 十 规范 。 


// Deferred 精简 后 主要 逻辑 的 源码 
Deferred: function( func ) { 
let tuples = [ 
// action, add listener, listener list, final state 
[ "resolve", "done", jQuery.Callbacks("once 
memory"), "resolved" ]， 
[ "reject", "fail", 
jQuery. Callbacks("once memory"), "rejected" ]， 
[ "notify", "progress", jQuery.Callbacks("memory") | 
]， 
state = "pending", 
promise = { 
state: function() {}, 
always: function() {}, 
then: function( /* 成 功 调用 ， 失 败 调用 ， 处 理 中 状态 */ ) 
{}, 
promise: function( obj ) 全 
}, 
deferred = {}; 
jQuery.each(tuples, function( i, tuple ){ 
deferred[tuple[0] + "With"] = list.firewith; 
}); 
promise.promise(deferred ) ; 


return deferred ， 


从 上 面 jQuery 的 代码 中 可 以 看 出 ，jQuery 中 Deferred 实 现 其 实 是 一 
个 工厂 水 数 ， 执 行 $.Deferred 之 后 返回 一 个 带 有 state、always、then、 
promise 方 法 的 对 象 ， 它 的 状态 描述 也 作为 自己 的 属性 保存 在 对 象 中 。 
而 ECMAScript 6 中 Promise 的 实例 化 后 内 容 一 般 只 用 来 描述 状态 。 


// ECMAScript 6 的 promise 


{[[PromiseStatus]]: "resolved", [[PromiseValuel]]: "Fulfilled"} 


通常 Promise 的 状态 有 三 种 : Fulfilled 状 态 表 示 Promise 执 行 成 功 ; 
Rejected 状 态 表 示 Promise 执 行 失败 ; Pending 状 态 表 示 Promise 正 在 执行 
中 。 


let status = 1; 
let promise = new Promise(function(resolve, reject)t{ 
if(status === 1){ 
resolve('Fulfilled'); 
}elsef 


reject('Rejected') 


}); 

promise.then(function(msg)t{ 
console.log('success1:' + msg); 
return msg; 

},function(msg)t 
console.1log('faili:' + msg); 
return msg; 

}).then(function(msg){ 


console.log('success2:' + msg); 


},function(msg)t 
console.log('fail2:' + msg); 


}); 


我 们 来 看 一 个 具体 的 例子 ，promise 的 then 方 法 接受 两 个 处 理子 
数 ， 当 status 为 1 时 执行 Fulfilled 成 功 调用 ， 否 则 执行 Rejected 失 败 调用 。 
然后 将 返回 的 状态 返回 给 第 二 个 then 方 法 处 理 ， 并 将 状态 打印 。 输 出 结 
果 分 别 如 下 。 


success1: Fulfilled 


success2: Fulfilled 


then 方 法 可 以 将 传 入 参数 的 返回 值 一 直 传 递 下 去 ， 如 果 是 异步 的 场 
景 ， 就 可 以 用 这 种 方式 来 解决 多 层 回调 能 套 的 问题 了 。 


// 典型 的 异步 promise 例子 ， 希 望 它 依次 异步 输出 A、B、C、D 
let promise = new Promise(function(resolve) { 
setTimeout(function() { 
console.1log('A'); 
resolve( ); 
}，3900); // 延 时 3 秒 打 印 A 
}); 
// 使 用 then 来 链 式 处 理 流程 
promise.then(function() { 
return new Promise(function(resolve, reject) { 
setTimeout(function() { 
console.log('B') 


resolve( ); 


}，20600); // 延 时 2 秒 打印 B 
}); 
}).then(function() { 
return new Promise(function(resolve, reject) { 
setTimeout(function() { 
console.log('C') 
resolvel( ); 
}，14000); // 延 时 1 秒 打印 C 
}); 
}).then(function() { 
return new Promise(function(resolve, reject) { 
console.1l0g('D'); // 不 延 时 打印 D 
}); 
}); 


这 是 一 个 经 典 的 处 理 异 步 验 套 的 例子 ， 需 要 按照 顺序 依次 异步 输 
出 A、B、C、D， 这 种 情况 可 以 通过 在 不 同 的 then 处 理 方法 中 返回 一 个 
新 的 Promise 来 解决 。 返 回 新 的 Promise 里 面具 有 resolve() 和 reject() 方 
法 ， 只 有 当 它 的 resolve 或 reject 被 调用 时 ，Promise 方 法 才 会 继续 执行 ， 
进入 下 一 个 then 方 法 中 操作 。 如 果 我 们 设置 在 异步 水 数 完成 的 最 后 调用 
resolve (0) 就 可 以 有 效 控 制 Promise 进 入 下 一 个 then 方 法 执行 了 。 理 解 了 这 
个 示例 ， 就 基本 了 解 了 Promise 处 理 多 层 异 步 的 回调 机 制 。 


需要 注意 的 是 ， 新 的 版 本 浏览 器 放弃 了 ECMAScript 6 中 
Promise.defer() 的 使 用 方式 ， 因 为 它 并 不 是 Promise/A+ 标 准 方法 。 尽 
管 使 用 defer 来 处 理 这 个 问题 会 更 简单 。 


Symbol 


Symbol 是 ECMAScript 6 新 增加 的 基本 数据 类 型 ， 一 般 用 作 属 性 键 
值 ， 并 且 能 避免 对 象 属性 键 的 命名 冲突 。 


let object = {}; 
let name = Symbol(); 
let family = Symbol(); 


object[name] = 'ouven'; 


object[family] = 'zhang'; 


ya 
* 这 里 object 的 值 是 这 样 的 ， 显 示 属 性 的 键 名 是 Symbol1， 这 就 是 Symbol 的 作 
用 ， 你 仍 可 以 使 用 object[name ] 


去 读 取 对 象 的 属性 
“{ 
Symbol(): 'ouven', 


4 Symbol(): "zhang '， 
“了 
7 

console.log(object); 


console.log(typeof name); //symbol 


这 里 因为 对 象 的 键 是 Symbol 变量 ， 而 Symbol 变量 是 不 能 被 重复 声 
明 的 ， 这 种 情况 下 对 象 属性 定义 时 属性 键 就 不 会 被 重 复 定义 了 。 


在 ECMAScript 6 中 ，JavaScript 的 数据 类 型 就 有 七 种 了 : null、 


undefined、boolean、string、number、symbol、objecto 


Proxy 


ECMAScript 6 新 增 的 另 一 个 特性 是 Proxy.Proxy 可 以 用 来 拦截 某 个 
对 象 的 属性 访问 方法 ， 然 后 重 载 对 象 的 <. ”运算 符 。 这 似乎 和 我 们 之 
前 讲 到 的 某 种 方法 很 相似 ， 即 defineProperty 中 的 getter 和 setter， 举 例如 
下 。 


let object = new Proxy({}, { 
get: function (target, key, receiver) { 
console.log( “getting ${key}. ); 
return Reflect.get(target, key, receiver); 
}, 
set: function (target, key, value, receiver) { 
console.1og( Setting ${key}. ); 


return Reflect.set(target, key, value, receiver); 


}); 
// 看 看 之 前 的 一 个 方法 


let object = {}; 


let value; 


Object .defineProperty(object， 'value', { 

// 重 写 get 方法 

get: function() { 
console.log('getting value'); 
return value; 

}, 

// 重 写 set 方法 

set: function(newValue) { 
value = newValue; 
console.log('setting: ' + NewValue); 

}, 

enumerable: true, 


configurable: true 


}); 


// 赋值 或 定义 值 都 会 输出 
// getting value 
// setting value 


object['value'] = 3; 


这 两 段 代 码 的 的 作用 类 似 ， 都 是 支持 并 重 定义 对 象 的 getter 和 setter 
方法 进行 自 定义 返回 〈 这 种 实现 方式 通常 也 叫 对 象 劫持 ) ， 一 部 分 前 
端 MVVM (Model-View-ViewModel， 后 面 的 章节 我 们 会 详细 讲解 ) 框 
架 的 数据 更 变 检测 就 是 通过 此 手段 实现 的 ， 现 在 通过 实现 Proxy 也 可 实 
现 和 defineProperty 类 似 的 功能 ， 当 然 ， 这 只 是 ECMAScript 6 中 Proxy 的 
一 种 比较 典型 的 方法 。 


统一 码 


ECMAScript 6 字符 串 支持 新 的 Unicode 文 本 形式 ， 同 时 也 增加 了 新 
的 正则 表达 式 修 饰 符 u 来 处 理 统 一 码 。 尽 管 如 此 ， 在 实际 的 开发 中 ， 这 
样 处 理 仍 会 降低 程序 可 读 性 和 处 理 速度 ， 所 以 目前 不 建议 使 用 。 


' 字 符 串 ' .match(/./ug) .length === 3 //true 


进 制 数 支持 


ECMAScript 6 增加 了 对 二 进 制 (b) 和 八进制 (o) 数字 面 量 的 支 
持 。 可 能 这 个 在 实际 开发 中 很 少 遇 到 ， 所 以 大 家 只 要 先 了 解 就 可 以 
Ta 


0b111110111 === 503 // true 


00767 === 503 // true 


Reflect 对 象 和 tail calls 尾 调用 


Reflect 可 以 理解 为 原 有 对 象 上 的 一 个 引用 代理 ， 它 用 于 对 原 有 对 
象 进 行 赋值 或 取 值 操作 ， 但 不 会 触发 对 象 属性 的 getter 或 setter 调 用 ， 而 
直接 使 用 = 对 对 象 进 行 赋值 或 取 值 操作 会 自动 触发 getter 或 setter 方 法 ， 
关于 Reflect 的 用 法 可 以 参考 上 面 Proxy 的 例子 。 


tail calls 尾 调用 保证 了 函数 尾部 调用 时 调用 栈 有 一 定 的 长 度 限制 ， 
这 使 得 递归 函数 即使 在 没有 限制 输入 时 也 能 保证 安全 性 而 避免 发 生 销 


误 。 


function factorial(n, start = 1) { 

if (n <= 1) { 

return start; 

} 

return factorial(n - 1, n * start); 
} 
// 默认 情况 下 会 发 生 栈 溢出 ， 但 是 在 ECMAScript 6 中 是 可 以 安全 执行 的 
factorial(100000); 


BL 本 节 用 尽 可 能 少 的 
篇 幅 系 统 地 介绍 了 ECMAScript 6 的 所 有 新 特性 和 常用 特性 在 使 用 中 容 
易 犯 的 错误 及 需要 注意 的 地 方 ， 如 果 想 要 了 解 更 详细 的 关于 
ECMAScript 6 设计 与 实现 的 内 容 ， 可 以 去 查阅 更 完整 的 书籍 资料 。 


参考 资料 : http : //kangax.github.io/compat-table/o 


3.4.3 ECMAScript 7+ 


2016 年 ，ECMAScript 7 (或 称 ECMAScript 2016) 正式 发 布 。 整 体 
来 说 ， 在 ECMAScript 6 这 个 历史 性 版 本 逐渐 稳定 之 后 ， 后 期 版 本 添加 
的 主要 内 容 已 经 不 是 太 多 了 ， 主 要 包含 景 指 数 操作 符 与 
Array.prototype.includes， 下 面 我 们 具体 来 看 看 ECMAScript 7 的 内 容 。 


戎 指数 操作 符 


x**y 产生 的 结果 等 同 于 Math.pow(x，y) 
console.10g(2**3); //8 


增加 了 新 的 操作 符 来 进行 需 指 数 运算 ， 但 其 实 上 ， 这 种 情况 在 前 
端 开发 中 并 不 是 很 常用 。 


Array.prototype.includes 


这 个 数组 方法 主要 用 来 判断 数组 中 是 否 包含 某 个 元 素 。 


let colors = ['red' , 'blue' , 'green' , 'green' ] ;，; 


console.log(colors.includes('green')) ; // true 


除了 以 上 特性 ， 仍 有 部 分 新 内 容 将 在 ECMAScript 7 后 推出 ， 这 些 
也 是 讨论 比较 多 的 ， 我 们 将 选取 部 分 较为 典型 的 来 讲解 。 


异步 函数 asyncawait 


在 ECMAScript 6 发 布 时 ， 部 分 特性 的 实现 方案 并 没有 按期 发 布 ， 
大 家 便 预 想 这 些 特性 会 在 下 个 版 本 中 出 现 ， 其 中 被 关注 比较 多 的 就 是 
异步 函数 了 ， 那 么 我 们 一 起 来 看 看 ECMAScript 7 中 的 异步 水 数 是 怎样 
的 。 对 比 一 下 ECMAScript 6 中 Generator 的 例子 。 


const asyncFunction = async function (){ 
const numbers = [1, 2, 3, 4, 5]; 
for(let number of numbers)t{ 
await sleep(3000); 


console.1log(number ) ， 


let result = asyncFunction( ) ; 


console.1og( 'finish ' )， 


输出 结果 为 : 
finish 
1 
2 
3 
4 
5 


我 们 惊奇 地 发 现 ， 异 步 冰 数 的 写法 与 Generator 相 比 其 实 是 非常 类 
似 的 ， 区 别 在 于 async 国 数 将 Generator 国 数 的 星 号 米 蔡 换 成 async， 将 
yield 替 换 成 await， 并 且 少 了 next() 的 调用 控制 。 实 际 上 也 确实 如 此 ， 我 
们 可 以 认为 async/await 是 对 Generator 的 一 种 封装 简化 ， 专 门 用 于 处 理 
Generator 中 异步 的 场景 。 毕 竟 Generator 可 以 使 用 nextO 来 更 加 灵活 地 控 
制 整 个 程序 流程 的 执行 ， 处 理 异步 只 是 一 种 使 用 情况 。 


SIMD.JS -- SIMD APIs + Polyfill 


SIMD (single instruction, multiple data) 代表 的 是 单 指 令 多 数据 
流 ， 涉 及 并 行 计算 荡 畴 的 语法 指令 ， 可 以 看 出 未 来 JavaScript 有 可 能 会 
在 并 行 计算 领域 内 使 用 。 但 该 特性 目前 在 前 端 开 发 中 没有 具体 适合 的 
使 用 场景 ， 未 来 在 服务 器 端 则 可 能 成 为 一 个 常用 的 增强 特性 。 


我 们 再 来 总 结 一 下 JavaScript 中 实现 异步 的 方法 : setTimeout、 事 
件 监 听 、 观 察 者 模式 、$.Deferred、promise、 generator、async/wait、 
p 8 y 
第 三 方 async 库 等 。 


参考 资料 : https: /tc39.github.io/ecma262/。 


3.4.4 TypeScript 


关于 ECMAScript 6 和 ECMAScript 7 的 内 容 我 们 先 了 解 这 么 多 ， 下 
面 来 了 解 男 一 种 JavaScript“ 方 言 > 一 一 TypeScript。TypeScript 是 2012 年 微 
软 发 布 的 一 种 开源 语言 ， 和 与 之 结合 的 开源 编辑 器 VS code (Visual 
Studio Code) 一 起 推出 供 开发 者 使 用 。 到 今天 ，TypeScript 也 已 经 发 生 
了 比较 大 的 变化 ， 就 语言 特性 来 说 ，TypeScript 基 本 和 ECMAScript 6 的 
语法 保持 一 致 ， 可 以 认为 是 ECMAScript 6 的 超 集 ， 基 本 包含 了 
ECMAScript 6 和 ECMAScript 6 中 部 分 未 实现 的 内 容 ， 例 如 async/await， 
但 仍 有 一 些 少数 的 差异 性 特征 。 


强 类 型 支持 


TypeScript 的 数据 类 型 是 强 类 型 的 ， 声 明 时 需要 对 类 型 进行 定义 。 
这 种 规范 在 某 种 程度 上 避免 了 由 于 不 同类 型 之 间 的 变量 赋值 修改 所 导 
致 的 问题 ， 但 就 目前 的 开发 方式 和 应 用 场景 来 说 ， 该 特性 仍 没有 很 好 
的 应 用 优势 ， 反 而 增加 了 使 用 的 复杂 度 。 


let name:string = 'ouvenzhang' ，; 


let fullName:String = new String(name) ，; 


Decorator 装 饰 器 特性 


Decorator 可 以 用 来 注解 cass、property、method 和 parameter ， 也 是 
一 种 面向 对 象 编程 语言 设计 模式 的 借鉴 ， 目 前 新 版 的 Angular 2 框架 
引入 了 TypeScript 语 法 和 Decorator 使 用 来 描述 代码 复 用 性 定义 。 


class Aminal{ 
constructor() { 


pe 
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class People extends Aminalf{ 
constructor(contents = {}) { 
super(); 
this.name = contents.name; 
this.family = contents.family; 


} 
@sayHi(this) 


function sayHi(self) { 
console.log( “Hello ${self.name} ${self.family}. ); 


let boy = new People(L{ 
name: 'ouven', 
family: "zhang 
}); 


boy.sayHi(); // Hello ouven zhang 


相对 于 ECMAScript 6 而 言 ，TypeScript 的 定位 比较 尴 熔 ， 目 前 开发 
者 对 它 的 评价 也 襄 贬 不 一 ， 毕 竟 凭 借 一 两 个 亮点 功能 并 不 能 表现 出 与 
ECMAScript 6 十 规范 的 差异 化 优势 ， 对 于 它 未 来 的 发 展 性 ， 仍 有 待 进 
一 步 验 证 。 


3.5 “前 问 表 现 层 基础 
3.5.1 CSS 发 展 概 述 


CSS (Cascading Style Sheets) 是 随 着 前 端 表现 分 离 的 提出 而 产生 
的 ， 因 为 最 早 网 页 内 容 的 样式 都 是 通过 <center>、 <strike> 标签 或 
fontColor 等 属性 内 容 来 体现 的 ， 而 CSS 的 设计 则 提出 使 用 样式 描述 语言 
来 表达 页 面 内 容 ， 而 不 是 用 HTML 的 标签 来 表达 。 关 于 CSS 基 础 的 部 分 
相对 不 多 ， 我 们 将 从 CSS2 开 始 了 解 。 


继 CSS1 后 ，W3C 在 1998 年 发 布 了 CSS2 规 范 ，CSS2 的 出 现 主要 是 
为 了 解决 早期 网 页 开发 过 程 中 排版 时 表现 分 离 的 问题 ， 后 来 随 着 页 面 
表现 的 内 容 越 来 越 复 杂 ， 浏 览 器 平台 厂商 继续 推动 W3C 组 织 对 CSS 规 
范 进 行 更 多 的 改进 和 完善 ， 添 加 了 例如 border-radius、text-shadow、 


transform、animation 等 更 灵活 的 表现 层 特 性 ， 逐 渐 形 成 了 一 套 全 新 的 
W3C 标 准 ， 即 CSS3.CSS3 可 以 认为 是 在 CSS2 规 范 的 基础 上 进行 补充 和 
增强 形成 的 ， 让 CSS 体 系 更 能 适应 现代 浏览 器 的 需要 ， 拥 有 更 强 的 表现 

能 力 ， 尤 其 对 于 移动 端 浏览 器 ， 目 前 的 移动 端 浏 览 器 主要 以 Google 
Chrome 和 Apple Safari 浏 览 器 的 webkit 内 核 为 主 ， 由 于 浏览 器 内 核 版 本 
相对 较 高 ， 可 以 更 容易 地 支持 CSS3 特 性 来 完成 更 多 、 更 复杂 的 事情 。 
当然 目前 CSS4 的 草案 也 在 制定 中 ，CSS4 中 更 强大 的 选择 器 、 伪 类 和 伪 
元 素 特 性 已 经 被 曝光 出 来 ， 但 具体 发 布 时 间 仍 不 确定 。 


要 了 解 CSS， 主 要 还 是 要 了 解 CSS 的 属性 和 内 容 ， 那 么 下 面 我们 就 
从 几 个 方面 来 快速 把 握 CSS 相 关 知 识 的 整体 脉络 。 


3.5.2 ” ”CSS 选择 器 与 属性 
CSS 选 择 器 


简单 回顾 一 人 CSS 有 哪 几 类 选择 器 : id 选 择 器 、 类 选择 器 、 元 素 选 
择 器 、 组 合 选 择 器 、 伪 类 、 伪 元 素 等 。 一 般 认 为 CSS 中 选择 器 属性 优先 
级 顺序 为 ! important> 内 联 样 式 (权重 1000) > id 选 择 器 (权重 100) > 
类 选择 器 (权重 10) > 元 素 选 择 器 (权重 1) ， 多 种 组 合 情 况 按照 权重 
相 加 的 原则 来 计算 ，!important 优 先 级 最 高 。 


<style> 
#element{ 


display: inline-block; 


.ui-btnf{ 


display: inline-block; 


.Ui-btn:hovert{ 


color: red; 


} 
divt{ 
display: block; 
width: 200px; 
height: 100px; 
} 
buttont{ 
display: block !important; 
} 
</style> 


<div style="color: red;"></div> 


另外 值得 注意 的 是 ， 元 素 定 义 的 CSS 伪 类 和 伪 元 素 是 不 同 的 。 简 
单 地 说 ， 伪 元 素 会 在 HTML 中 添加 before 或 after 这 类 内 容 ， 而 像 : 
visited、:hover、 :first-child、:nth-child、:enable、:checked 这 些 伪 类 则 
不 会 ， 一 般 用 于 表示 元 素 在 用 户 不 同 操作 下 的 状态 或 选择 指定 某 些 
元 素 的 描述 ， 所 以 读者 们 要 注意 区 分 伪 类 和 伪 元 素 。 


CSS 属 性 
CSS 的 属性 和 值 直 接 决定 着 元 素 在 页 面 上 的 泻 染 表现 形式 ， 关 于 
CSS 常 用 属性 我 们 可 以 按照 表 3-5 所 示 的 方式 进行 归 类 。 


表 3-5 CSS 属 性 分 类 


属性 类 型 属性 名 
布局 类 属性 p osition 类 、 弹 性 布局 fex、 浮 动 foat、 对 齐 align 


盒 模型 相关 (margin、padding、width、heigh、 
几何 类 属性 border) 、box-shadow、 渐 变 gradient、backgroud 


类 、transform 类 


font 类 、 line-height 、 color 类 、 text 类 (text- 


文本 类 属性 decoration 、 text-indent、 textoverflow) 、 white- 


space、 user-select、text-shawdow 等 


动画 类 属性 以 css3 为 主 的 transition、animation 等 
查询 类 Media query 和 IE Hack 等 


尽管 我 们 觉得 CSS 的 属性 很 多 ， 但 是 分 类 以 后 发 现 ， 基 本 就 以 上 几 
类 ， 此 外 均 是 一 些 相对 不 常用 的 属性 。 这 里 的 属性 使 用 比较 简单 ， 此 
处 就 不 一 一 展开 了 。 


对 于 开发 者 来 说 ， 在 CSS 编 码 开发 中 ， 复 杂 的 或 许 并 不 是 学 习 这 些 
属性 对 应 的 值 有 哪些 ， 而 是 在 实际 项 目 中 处 理 CSs 兼 容 性 问题 。 因 为 浏 
览 器 的 版 本 、 平 台 的 多 样 性 导致 浏览 器 对 CSS 属 性 支持 的 差异 性 极 大 ， 
兼容 性 问题 总 是 很 难 完美 解决 ， 遇 到 这 些 情 况 融 只 能 冷静 下 来 一 步 步 
分 析 ， 经 验 的 积累 尤为 重要 。 


3.5.3 ”简单 的 应 用 举例 


CSS 在 页 面 中 的 实现 非常 灵活 ， 通 常 实现 一 个 效果 的 方式 会 有 很 
多 ， 我 们 需要 根据 具体 的 场景 选择 最 合适 的 方式 来 实现 。 这 里 举 两 个 
较 典 型 的 简单 例子 。 


弹性 布局 。 例 如 我 们 要 实现 一 个 等 宽 的 三 列 布局 ， 并 根据 父 元 素 
的 宽度 自动 改变 ， 实 现 的 思路 有 很 多 。 


<ul> 
<1i> 菜 单 1</1i> 
<1i> 菜 单 2</1i> 
<1i> 菜 单 3</1i> 


</ul> 


<!- -常见 的 方式 - -> 


<style> 
“{ 
margin: 0; 
padding: 0; 
} 
ul{ 
width: 100%; 
} 
ul 1if{ 


float: left; 


width: 33.333%,; 


list-style-type: none 


</style> 


<!-- flex 弹性 布局 的 方式 - -> 


<style> 

“+{ 
margin: 0; 
padding: 0; 

} 

ul{ 
display: -webkit-box; 
display: -webkit-flex; 
display: -ms-flexbox; 
display: flex; 

} 

ul 1if{ 
-webkit-box-flex: 1; 
-moz-box-flex: 1; 
-webkit-flex: 1; 
-ms-flex: 1; 
flex: 1; 
list-style-type: none; 

} 


</style> 


除 此 之 外 ， 还 有 其 他 的 实现 方式 ， 可 以 灵活 考虑 。 再 如 页 面 中 省 
略 号 的 显示 ， 我 们 要 在 页 面 中 实现 一 行 或 两 行文 字 超 出 时 显示 省 略 号 
的 效果 ， 融 可 以 这 样 来 写 。 


// 实现 一 行文 字 省 略 号 

pt 

width: 200px; 
height: 36px; 
overflow: hidden; 
text-overflow: ellipsis,; 


white-space: nowrap; 


// 实现 两 行文 字 省 略 号 

pt 
width: 200px; 
height: 36px; 
overflow: hidden; 
text-overflow: ellipsis,; 
display: -webkit-box; 
display: -webkit-flex; 
display: -ms-flexbox; 
display: flex; 
-webkit-line-clamp: 2; 
line-clamp: 2; 


-webkit-box-orient: vertical; 


box-orient: vertical; 


第 二 种 实现 方式 需要 考虑 兼容 性 的 问题 ， 推 荐 用 于 移动 端 ， 另 外 
也 可 以 通过 JavaScript 截 取 的 方式 来 达到 类 似 的 效果 。 再 如 实现 元 素 内 
容 居中 可 以 选择 margin: 0 auto 设 置 居中 、text-align: center 设 置 居 中 、 
display: table-cell; vertical-align: middle 设 置 垂 直 居 中 、 绝 对 定位 等 多 种 
方法 。 


这 里 列举 了 几 个 比较 简单 的 例子 ， 前 端 开发 中 需要 处 理 CSS 的 典型 
景 很 多 ， 还 有 清除 浮动 、 自 适应 三 列 布局 等 一 些 典 型 的 实现 案例 大 
家 都 可 以 去 了 解 ， 此 处 不 一 一 展开 了 。 


关于 CSS 的 标准 规范 基础 这 里 讲 的 内 容 相 对 较 少 ， 并 不 是 说 CSS 就 
比较 简单 ， 这 些 是 我 们 进行 开发 的 基础 ， 而 且 了 解 这 些 仍然 不 够 。 实 
际 工程 实践 中 ， 我 们 还 需要 结合 CSS 的 预 处 理 技 术 和 组 件 化 UI 框 架 的 设 
计 理 念 来 高 效 地 实现 具体 功能 的 表现 模块 ， 这 些 内 容 将 会 在 下 一 节 中 
具体 介绍 。 


3.6 ”前 端 界 面 技 术 


上 一 节 中 我 们 简单 了 解 了 前 端 表现 层 的 基础 内 容 ， 这 一 节 中 我 们 
来 结合 实际 的 开发 技术 进行 项 目 实践 。 前 端 界面 技术 主要 指 目前 网 页 
表现 层 上 的 开发 实现 技术 。 下 面 从 以 下 几 个 方面 来 了 解 现 代 前 端的 界 
面 技术 : 前 端 表 现 层 CSS 样 式 统一 化 、 预 处 理 技术 、 表 现 层 动画 实现 ， 
最 后 我 们 一 起 来 简单 了 解 CSS4 的 发 展 情况 。 


3.6.1 CSS 样式 统一 化 


目前 访问 Web 网 站 应 用 时 ， ee 由 于 浏览 
器 间 内 核实 现 的 差异 性 ， 不 同 浏览 器 可 能 对 同一 元 素 标签 样式 的 默认 
设置 是 不 同 的 ， 人 化 处 理 ， 可 能 会 出 现 同一 个 
网 页 在 不 同 浏览 器 下 打开 时 显示 不 同 或 样式 不 一 致 的 问题 。 要 处 理 这 
一 问题 目前 主要 有 三 种 实现 思路 : reset、normalize 和 neato 


reset 


先 来 看 看 使 用 reset 的 方式 进行 样式 统一 化 的 思路 : 将 不 同 浏览 
中 标签 元 素 的 默认 样式 全 部 清除 ， 消 除 不 同 浏览 器 下 默认 样式 的 差异 
性 。 典 型 的 reset 默 认 样 式 的 代码 如 下 。 


body, hi, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, 
ol, 1i, pre, form, fieldset, 
legend, button, input, textarea, th, td{ 

margin:0; 


padding:0; 


这 种 方式 可 以 将 不 同 浏 览 器 上 大 多 数 标 签 的 内 外 边 距 清除 ， 需 要 
注意 的 是 ， 这 个 例子 中 的 规则 不 能 消除 标签 所 有 的 差异 性 ， 而 这 里 只 
是 针对 消除 内 外 边 距 差异 性 来 举例 子 ， 其 他 样式 的 差异 性 处 理 方 法 类 
似 。 消 除 默 认 样 式 后 重新 定义 元 素 样式 时 ， 单 单 需要 针对 具体 的 元 素 
标签 重 写 样式 来 覆盖 reset 中 的 默认 规则 ， 所 以 这 种 情况 下 我 们 常 单 需 
要 去 重 写 样式 来 对 元 素 添 加 各 自 的 样式 规则 。 


例如 元 素 标签 <li> 禾 座 会 有 列 丧 样 式 ， 历 我 们 遂 瞬 并 不 需要 ， 
那么 就 可 以 站 reset 中 统一 设置 list-style-type: none 来 处 理 ; 另外 <1li> 
与 <li> 之 问 可 能 有 句 车 空 炊 会 导致 元 莱 之 问 站 浏览 况 上 有 空白 问 
异 ， 这 和 桂 的 问题 世 可 以 通过 下 reset 中 统一 设置 float 等 方法 来 解决 。 


normalize 


相对 于 reset 方 式 存在 的 问题 ，normalize 的 思路 稍 有 区 别 ，normalize 
的 做 法 是 在 整 站 样式 基本 确定 的 情况 下 对 标签 元 素 统一 使 用 同一 个 默 
认 样 式 规则 ， 例 如 整个 站 点 规定 元 素 之 间 的 最 小 常用 的 内 外 边 距 都 是 
5pXx， 则 代码 如 下 。 


body, hi, h2, h3, h4, hs, h6, hr, p, blockquote, dl, dt, dd, ul, 
ol1l, 1i, pre, form, fieldset, 
legend, button, input, textarea, th, td{ 

margin:5px; 


padding:5px; 


这 种 方式 建议 在 网 站 基本 样式 或 规范 确 定 的 情况 下 使 用 。 相 对 于 
reset， 这 种 实现 方式 避免 了 较 多 的 样式 重 写 情况 ， 例 如 使 用 reset 上 面 的 
这 种 情况 就 要 在 每 个 出 现 的 元 素 里 面 定义 margin:5px; padding:5px;， 但 
一 般 normalize 只 适用 于 网 站 前 端 基本 设计 规范 确定 且 统 一 的 情况 下 ， 
否则 normalize 将 失去 意义 而 且 会 导致 页 面 表现 层 样式 不 易 维护 。 


neat 


neat 可 以 认为 是 对 上 面 两 种 实现 的 综合 ， 因 为 我 们 通常 不 能 保证 网 
站 界面 上 的 所 有 元 素 的 内 外 边 距 都 是 确定 的 ， 又 不 想 将 所 有 样式 都 清 
除 后 再 进行 覆盖 重 写 。 例 如 我 们 只 想 对 文本 相关 元 素 设 置 内 外 边 距 
5px， 而 其 他 的 元 素 则 清除 不 同 浏览 器 的 默认 样式 差异 ， 那 么 这 样 定义 
就 显得 比较 整洁 。 


body, dl, dt, dd, ul, ol, 1i, form, fieldset, button, input, 


textareat{ 
margin:0; 
padding:0; 
} 


hi, h2, h3, h4, hs, h6， hr, p, blockquote, dt, pre, 
legend, textarea, th, tdf{ 
margin:5px; 


padding:5px; 


总 结 来 说 ， 前 端 统一 化 CSS 样 式 主要 有 reset，normalize，neat 三 种 
实现 思路 : reset 是 清除 浏览 器 的 默认 样式 并 保持 在 所 有 浏览 器 中 一 
致 ，normalize 是 使 用 同一 种 默认 样式 并 在 所 有 浏览 器 中 保持 样式 一 
致 ，neat 则 可 以 认为 是 前 两 种 的 结合 ， 具 体 需 要 根据 网 站 的 设计 特点 来 
确定 ， 但 仍 需 要 保证 默认 样式 在 所 有 浏览 器 中 是 一 致 的 。 三 种 方法 各 
有 自己 的 使 用 场景 ， 我 们 可 以 结合 具体 的 团队 项 目 开发 模式 来 选择 ， 


通常 情况 下 由 于 网 页 界面 的 设计 是 不 确定 的 ， 所 以 目前 使 用 reset 的 开 
发 场景 比较 多 。 


一 个 典型 的 CSS reset 的 实现 代码 如 下 。 


body, hi, h2, h3, h4, hs5, h6, hr, p, blockquote, dl, dt, dd, ul, 
ol, 1i, pre, form, fieldset, 
legend, button, input, textarea, th, td, article, aside, 
details, figcaption, figure, footer, 
header, hgroup, menu, nav, sectionf{ 
margin:0; 
padding:0; 
} 
html, body{ 
width:100%; 


height: 100%; 


} 
hi { 

font-size: 18px; 
} 
h2 { 

font-size: 16px; 
} 
h3 { 

font-size: 14px; 
} 
h4, hs5, he { 


font-size: 100%; 


at 


text-decoration: none; 


} 
a:hover { 

text-decoration: underline; 
} 


fieldset, img { 


border: none; 


} 
table { 
border-collapse: collapse; 
border-spacing: 0; 
} 
:focust{ 
outline: 0; 
-webkit-tap-highlight-color: transparent; 
} 


3.6.2 ”CSS 预 处 理 


页 前 端 表现 层 通常 是 直接 使 用 CSS 来 实现 的 ， 目 前 CSS 开 发 也 已 
人 CSS 预 处 理工 具有 很 多 ， 例 如 SASS、LESS、 
Stylus、postCSS 等 。 尽 管 使 用 的 工具 不 同 ， 而 且 各 有 特点 和 优势 ， 但 
所 有 预 处 理工 具 的 最 终 目的 是 一 致 的 : 通过 编写 更 高 效 、 易 管理 的 类 
CSS 脚 本 并 将 它们 自动 生成 浏览 器 解释 执行 的 CSS 代 码 ， 现 实 高 效 开 发 


和 便捷 管理 。 所 以 CSS 预 处 理 技术 具有 几 个 优势 : 提高 开发 效率 ， 例 如 
SCSS 的 窝 套 、 父 级 选择 符 、Mixin、 Extend ， 或 者 postCSS 的 
autoprefixer 等 都 是 为 了 减少 书写 重复 性 代码 、 提 高 编写 效率 而 设计 
的 ; 便于 管理 则 ， 预 处 理 器 使 用 的 类 CSS 脚 本 可 以 按 模块 编写 开发 进行 
管理 ， 而 且 幸 运 的 是 大 部 分 预 处 理工 具 都 有 相应 的 模块 引用 机 制 并 能 
借助 构建 工具 自动 完成 编译 打包 。 这 样 我 们 就 可 以 专注 于 业务 模块 层 
中 CSS 脚 本 的 开发 了 。 


这 里 我 们 还 是 以 SASS (或 许 有 人 认为 有 点 落后 ， 但 工具 本 身 并 没 
有 那么 重要 ) 为 例 来 看 看 这 些 预 编译 工具 能 实现 什么 功能 。 其 他 一 些 
预 处 理工 具 是 类 似 的 ， 或 许 还 带 有 一 些 更 加 便捷 的 功能 。 


SASS 的 预 处 理 实现 主要 包含 模块 引用 、 舱 套 、 父 级 选择 符 、 苦 套 


属性 、 注 释 、 变 量 、 数 据 类 型 、 运 算 、 圆 括号 、 孙 效 、 复 写 、 变 量 默 
认 值 、 规 则 指令 、 控 制 指 令 、mixin、 继 承 extend 等 这 些 属性 。 具 体 如 
下 。 


// 可 以 方便 地 引入 模块 


@import "reset.scss",; 


// 变量 赋值 与 计算 能 力 ， 可 以 统一 管理 样式 重出 现 的 重复 变量 或 默认 样式 
$width: 5px + 10px; 

$height: 5rem， 

$name: box; 

$attr: margin; 

$content: "empty text' Iidefault; 


$maxwidth: 375px; 


// 处 理 函 数 
@function getwidth($n){ 


Q@return $n*3rem - irem; 


// mixin 代码 块 。 这 里 与 处 理 函 数 的 区 别 在 于 ，mixin 的 内 容 会 被 全 部 填充 到 引入 
的 元 素 代 码 里 面 ， 而 function 
// 阔 数 只 做 过 程 处 理 并 输出 
Q@mixin mod{ 
width: $width ， 
height: ($height + 3rem)/2; 
$font-size: 12px; 
$line-height: 20px; 
// 可 以 使 用 #{} 包 住 变 量 进行 计算 
font: #{$font-size}/#{$line-height}; 


.Ui-mod-atft 
// 设立 使 用 @include 引用 的 mixin 内 容 将 被 填充 进来 
@include mod; 
&:hovert{ 


cursor: pointer,; 


} 
&:afterf{ 

content: $content; 
} 


.Pp.#{$name}{ 


#{$attr}-left: 4px; 


@media screen and(max-width: $maxWwidth)t{ 


#{$attr}-left: 8px; 


// 继承 的 使 用 ， 这 里 .ui-mod-b 继承 了 .ui-mod-a 的 所 有 属性 ， 并 且 覆 写 了 
width 属性 
.Ui-mod-bf{ 

Q@extend .ui-mod-a; 

@if null {width: $maxwidth;} 

width: getwidth(3); 


这 里 用 简单 的 代码 基本 演示 了 SASS 所 有 的 主要 功能 ， 整 体 上 理解 
也 很 简单 。 如 果 需 要 进一步 了 解 可 以 查看 手册 ， 相 信 大 家 了 
白 怎 么 运用 SASS。 我 们 再 看 一 个 postCSS 的 案例 了 解 一 下 什么 
autoprefixer (自动 填充 ) 。 


.autoprefixer { 
display: flex; 


transform: tranlatez(0); 


在 上 面 的 例子 中 ，postCSS 在 处 理 一 些 需 要 兼容 性 处 理 的 样式 时 会 
自动 添加 兼容 性 修饰 ， 不 需要 我 们 在 编写 代码 规则 时 重复 编码 ， 这 样 


就 很 高 效 便捷 。 通 过 postCSS， 上 面 的 代码 预 处 理 后 最 终 输出 结果 如 
下 。 


.autoprefixer { 
display: -webkit-box; 
display: -webkit-flex; 
display: -ms-flexbox; 
display: flex; 
-webkit-transform: translatez(0); 
-ms-transform: translatez(0); 
-0-transform: translatez(0); 


transform: translatez(0); 


整体 上 来 看 ，CSS 预 处 理 器 的 语法 特性 和 模式 的 设计 很 像 编 程 语 言 
的 设计 思路 ， 开 发 完成 后 通过 语法 处 理 器 来 解析 编译 成 标准 规范 的 
CSS， 这 也 和 之 前 讲 到 的 JavaScript 脚 本 开发 的 思路 很 像 ， 使 用 简洁 高 
效 的 衍生 语法 (例如 CoffeeScript 语 法 或 浏览 器 端的 ECMAScript 6 十 语 
法 ) 编译 生成 安全 、 规 范 的 JavaScript 来 运行 。 一 个 高 效 的 预 处 理 语 法 
工具 一 般 具 有 以 下 特性 。 


o 变量 声明 和 计算 。 方 便 一 次 赋值 和 随处 使 用 ， 并 能 进行 简单 运 
算 ， 提 高 开发 管理 效率 。 


o 语法 表达 式 。 例 如 让 else 条 件 语句 、for 循 环 等 简单 语法 的 设计 
能 让 页 面 CSS 规 则 的 生成 更 加 灵活 。 


o 函数 处 理 。 方 便 多 次 计算 的 地 方 能 统一 复 用 ， 例 如 函数 处 理 和 
Mixin 等 特性 。 


o 属性 的 继承 。 元 素 类 属性 的 继承 在 开发 样式 相似 但 略微 不 同 的 
多 个 模块 的 过 程 中 非常 有 用 ， 可 以 减少 大 量 重 复 代码 。 


o 兼容 性 补 全 。 类 似 autoprefixer 这 种 功能 ， 让 开发 者 不 用 过 多 关 
注 不 同 浏览 器 的 兼容 问题 ， 处 理 多 个 浏览 器 兼容 性 的 代码 能 
在 预 处 理 阶 段 自动 生成 补 全 ， 让 一 些 问 题 的 处 理 方式 对 开发 
者 透明 。 


利用 这 些 功 能 特性 ， 开 发 类 CSS 脚 本 相 比 于 原始 的 CSS 就 高 效 很 多 
了 。 尤 其 是 在 网 站 基础 结构 样式 开发 时 ， 可 以 将 不 同 基础 功能 的 实现 
使 用 不 同 的 文件 来 管理 实现 ， 不 同 的 组 件 部 分 也 可 以 通过 不 同 的 文件 
进行 模块 化 管理 。 


3.6.3 ”表现 层 动画 实现 


除了 样式 统一 化 处 理 和 预 处 理 技术 ， 前 端 界 面 男 一 个 很 重要 的 内 
容 就 是 动画 ， 使 用 符合 场景 的 动画 不 仅 可 以 优化 网 站 页 面 中 的 交互 细 
节 ， 提 高 用 户 体 验 ， 还 可 以 让 页 面 更 具有 了 吸引 力 ， 给 网 站 带 来 更 多 访 
问 量 。 通 常 前 端 中 ， 实 现 动画 的 方案 主要 有 6 种 : JavaScript 直 接 实现 动 
画 、 可 伸缩 矢量 图 形 (Scalable Vector Graphics，SVG) 动画 、CSS3 
transition、 CSS3 animation、 Canvas 动 男 、requestAnimationFrame。 这 
样 看 可 能 比较 抽象 ， 因 为 大 家 可 能 都 听 说 过 ， 但 是 并 不 清楚 具体 细 
节 。 下 面 我 们 就 以 一 个 具体 的 场景 应 用 为 例 ， 来 看 看 这 些 动画 的 实现 


方案 。 


如 图 3-7， 我 们 需要 在 页 面 上 实现 一 个 方块 元 素 从 左 向 右 移动 的 效 
果 ， 移 动 一 段 距 离 后 停止 移动 或 重新 开始 移动 ， 上 述 6 种 方法 都 可 以 实 


现 。 我 们 先 来 看 看 使 用 JavaScript 直 接 实现 动画 的 方式 。 


;党 应 用 该 Bookmarks G Google ee Chrome 网 上 


向 右 移动 


图 3-7 ”动画 效果 示例 
JavaScript 直 接 实现 动画 


JavaScript 直 接 实现 动画 的 方式 在 前 端 早 期 使 用 较 多 ， 其 主要 思想 
是 通过 JavaScript 的 setInterval 方 法 或 setTimeonut 方 法 的 回调 函数 来 持续 调 
用 改变 某 个 元 素 的 CSS 样 式 以 达到 元 素 样 式 持 续 变 化 的 结果 ， 下 面 是 实 
现 一 个 元 素 从 左 向 右 移 动 的 示例 代码 。 


<1DOCTYPE html> 
<htm] lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title> 动 画 移动 </title> 
<style> 
“{ 
margin: 0; 


padding: 0; 


divt{ 
width: 200px; 
height: 200px; 
background-color: red; 
} 
</style> 
</head> 
<body> 
<div id="box"></div> 
<script> 
// 获取 页 面 移动 元 素 
let element = document.getElementById('box'); 
let left = 0; 


// 设置 定时 循环 调用 改变 元 素 样式 的 marginLeft 属性 ， 当 到 达 浏 览 器 右边 缘 
时 停止 移动 
let timer = setIinterval(function(){ 
if(left < window.innerwidth - 200){ 
element.style.marginLeft = left + 'px'; 
left ++; 
}elsef 


clearIinterval(timer); 


} 
}, 16); 
</script> 
</body> 
</html> 


通过 代码 中 的 注释 ， 我 们 很 清楚 地 理解 了 动画 实现 的 原理 和 过 
程 。JavaScript 直 接 实现 动画 也 就 是 不 断 执行 setInterval 的 回调 改变 元 素 
的 marginLeft 样 式 属 性 达 动 画 的 效果 ， 例 如 jQuery 的 animate() 方 法 就 属 
于 这 种 实现 方式 。 不 过 要 注意 的 是 ， 通 过 JavaScript 实 现 动画 通常 会 导 
致 页 面 频繁 性 重 排 重 绘 ， 很 消耗 性 能 ， 如 果 是 稍微 复杂 的 动画 ， 在 性 
能 较 差 的 浏览 器 上 就 会 明显 感觉 到 卡 顿 ， 所 以 我 们 尽量 避免 使 用 它 。 


在 上 面 的 例子 中 ， 有 心 的 读者 会 发 现 ， 我 们 设置 setInterval 的 时 
间 间 隔 是 16ms， 为 什么 呢 ? 一 般 认为 人 眼 能 辨识 的 流畅 动画 为 每 秒 
60 帧 ， 这 里 16ms 比 1000ms/60 帧 略 小 一 点 ， 所 以 这 种 情况 下 可 以 认为 
动画 是 流畅 的 。 在 很 多 移动 闯 动 男性 能 优化 时 ， 一 般 使 用 16ms 来 进 
行 节 流 处 理 连 续 触 发 的 浏览 器 事件 ， 例 如 对 touchmove、scroll 事 件 进 
行 节 流 等 。 我 们 通过 这 种 方式 来 减少 持续 性 事件 的 触发 频率 ， 可 以 
大 大 提升 动画 的 流畅 性 。 


SVG 动画 


SVG 又 称 可 伸缩 矢量 图 形 ， 原 生 支 持 一 些 动 男 效 果 ， 通 过 组 合 可 
以 生成 较 复杂 的 动画 ， 而 且 不 需要 使 用 JavaScript 参 与 控制 。SVG 动 画 
由 SVG 元 素 内 部 的 元 素 属 性 控制 ， 通 常 通过 <set>、 <animate>、 
<animateColor>、 <animateTransform>、 <animateMotion> 这 几 个 元 素来 
实现 。<set> 可 以 用 于 控制 动画 延 时 ， 例 如 一 段 时 间 后 设置 SVG 中 元 素 
的 位 置 ， 就 可 以 使 用 <set> 在 动画 中 设置 延 时 ; <animate> 可 以 对 属性 的 
连续 改变 进行 控制 ， 例 如 实现 左右 移动 动画 效果 等 ; <animateColor> 表 
示 颜 色 的 变化 ， 不 过 现在 用 <animate> 就 可 以 控制 了 ， 所 以 用 的 基本 不 


多 ; <animateTransform> 可 以 控制 如 缩放 、 旋 转 等 几何 变化 ; 
<animateMotion> 则 用 于 控制 SVG 内 元 素 的 移动 路 径 。 我 们 来 看 一 个 元 


素 移 动 的 例子 。 


<1DOCTYPE html> 
<htm] lang="en"> 
<head> 
<meta charset="UTF-8"> 


<title> 动 画 移 动 </title> 


<style> 
“{ 
margin: 0; 
padding: 0; 
} 
</style> 
</head> 
<body> 


<svg id="box" width="800" height="400" 
xmlns="http://www.w3.org/2000/svg"> 
<rect width="100" 


style="fill:rgb(255,0,0);"> 


version="1.1" 


height="100" 


<set attributeName="x" attributeType="XML" to="100" 


begin="4s" /> 


<animate attributeName="x" attributeType="XML" 


begin="Qs" dur="4s" from="Q" 


to="300" /> 


<animate attributeName="y" attributeType="XML" 


begin="0s"” dur="4s" from="0" 
to="0"” /> 
<animateTransform attributeName="transform" 
begin="0Os" dur="4s" type="scale" 
from="1" to="2" repeatCount="1"/> 
<animateMotion path="M10,80 9q100,120 120,20 9q140,-50 
160,0" begin="QOs" dur="4s" 
repeatCount="1"/> 
</rect> 
</svg> 
</body> 
</html> 


需要 注意 的 是 ，SVG 内 部 元 素 的 动画 只 能 在 元 素 内 进行 ， 超 出 
<svg> 标 签 元 素 ， 就 可 以 认为 是 超出 了 动画 边界 。 通 过 理解 上 面 的 代码 
可 以 看 出 ， 在 网 页 中 <svg> 元 素 内 部 定义 了 一 个 边 长 100 像 素 的 正方 
形 ， 并 且 在 4 秒 时 间 延 时 后 开始 向 右 移 动 ， 经 过 4 秒 时 间 向 右 移 动 300 像 
素 ， 同 时 正方 形 在 移动 过 程 中 会 放大 1 倍 。 相 对 于 JavaScript 直 接 控制 动 
国 的 方式 ， 使 用 SVG 的 一 个 很 大 优势 是 含有 较 丰 时 的 动画 功能 ， 原 生 
可 以 绘制 各 种 图 形 、 滤 镜 和 动画 ， 绘 制 的 动画 为 矢量 图 ， 而 且 实 现 动 
画 的 原生 元 素 依 然 是 可 被 JavaScript 调 用 的 。 然 而 另 一 方面 ， 我 们 要 明 
白 ， 元 素 较 多 且 复 杂 的 动画 使 用 SVG 泻 染 会 比较 慢 ， 而 且 SVG 格 式 的 
动画 绘制 方式 必须 让 内 容 冤 入 到 HTML 中 使 用 。 以 前 这 种 动画 实现 的 场 
景 相对 比较 多 ， 但 随 着 CSS3 的 出 现 ， 这 种 动画 实现 方式 相对 使 用 得 越 
来 越 少 了 。 


CSS3 transition 


CSS3 出 现 后 ， 增 加 了 两 种 CSS3 实 现 动画 的 方式 : transition 和 
animation， 我 们 先 来 看 看 高 效 强大 的 CSS3 过 渡 动 男 transition。 为 什么 
称 为 过 渡 动 男 呢 ? 其 实 transition 并 不 能 实现 独立 的 动画 ， 只 能 在 某 个 标 
i ha 平滑 的 动画 效果 过 渡 ， 而 不 是 马上 改 

。 依然 以 元 素 移 动 为 例 来 看 下 面 的 代码 。 


<1DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 


<title> 动 画 移 动 </title> 


<style> 
“{ 
margin: 0; 
padding: 0; 
} 
div{ 
width: 200px; 
height: 200px; 
margin-left: 0; 
background-color: red; 
transition: all 3s ease-in-out Qs; 
-webkit-transition: all 3s ease-in-out Os; 
} 


.right{ 
margin-left: 400px; 


background-color: blue; 


</style> 
</head> 
<body> 
<div id="box"></div> 
<script> 
let timer = setTimeout(function() { 
let element = document.getElementById('box'); 
// 改变 元 素 的 样式 
element.setAttribute('class', 'right'); 
}, 500); 
</script> 
</body> 
</html> 


这 里 我 们 一 般 通 过 改变 元 素 的 起 始 状态 ， 让 元 素 的 属性 自动 进行 
平滑 过 渡 产 生动 男 ， 当 然 也 可 以 设置 元 素 的 任意 属性 进行 过 渡 变 化 。 
它 应 用 于 处 理 元 素 属 性 改变 时 的 过 渡 动 画 ， 而 不 能 应 用 于 处 理 元 素 独 
立 动 画 的 情况 ， 否 则 就 需要 不 断 改变 元 素 的 属性 值 来 持续 触发 动画 过 
程 了 。 


在 移动 端 开 发 中 ， 直 接 使 用 transition 动 画 会 让 页 面 变 慢 甚至 变 卡 
顿 ， 所 以 我 们 通常 通过 添加 transform: translate3D(0, 0, 0) 或 transform: 
translateZ(0) 来 开启 移动 端 动画 的 GPU 加 速 ， 让 动画 过 程 更 加 流畅 。 


CSS3 animation 


CSS3 animation 的 动画 则 可 以 认为 是 真正 意义 上 页 面 内 容 的 CSS3 动 
男 ， 通 过 对 关键 帧 和 循环 次 数 的 控制 ， 页 面 标签 元 素 会 根据 设 定好 的 
样式 改变 进行 平滑 过 渡 ， 而 且 关 键 帧 状态 的 控制 一 般 是 通过 百分比 来 
控制 的 ， 这 样 我 们 就 可 以 在 这 个 过 程 中 实现 很 多 动画 的 动作 了 。 定 义 
动画 的 keyframes 中 from 值 和 0% 的 意义 是 相同 的 ， 表 示 动 画 的 开始 关键 
帧 。to 和 100% 的 意义 相同 ， 表 示 动 男 的 结束 关键 帧 。 通 过 CSS3 
animation， 上 述 元 素 移动 效果 就 可 以 这 样 来 实现 了 。 


<IDOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 


<title> 动 画 移 动 </title> 


<style> 

at 
margin: 0; 
padding: 0; 
} 

div { 


width: 200px; 

height: 200px; 
margin-left: 0， 
background-color: red; 


animation: move 4s infinite; 


-webkit-animation: move 4s infinite; 


} 
@keyframes move { 
from { 
margin-left: 0; 
} 
50% { 
margin-left: 400px; 
} 
to { 
margin-left: 0; 
} 
} 
</style> 
</head> 
<body> 


<div id="box"></div> 
</body> 
</html> 


相信 很 多 人 也 很 了 解 了 ，CSS3 实 现 动画 的 最 大 优势 是 脱离 
JavaScript 的 控制 ， 而 且 能 用 到 硬件 加 速 ， 可 以 用 来 实现 较 复杂 的 动画 
效果 。 


Canvas 动 画 


<canvas> 作 为 HTML5 的 新 增 元 素 ， 也 可 以 借助 Web API 实 现 页 面 动 
画 。 Canvas 动 男 的 实现 思路 和 SVG 的 思路 有 点 类 似 ， 都 是 借助 元 素 标 
ee 都 需要 借助 对 应 的 一 套 API 来 实现 ， 不 过 
SVG 的 API 可 以 认为 主要 是 a A 而 
Canvas 则 是 通过 JavaScript API 来 实现 的 。 需 要 注意 的 是 ， 和 SVG 动画 
一 样 ，Canvas 动 画 的 进行 只 能 在 <canvas> 元 素 内 部 ， 超 出 <canvas> 元 素 
边界 将 不 被 显示 ， 我 们 再 来 看 一 下 前 面 示例 的 Canvas 的 实现 。 


<1DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 


<title> 动 画 移 动 </title> 


<style> 
“4 
margin: 0; 
padding: 0; 
} 
</style> 
</head> 
<body> 


<canvas id="canvas" width="700" height="550"> 
浏览 器 不 支持 canvas 

</canvas> 

<script> 

let canvas = document.getElementById("canvas"); 


let ctx = canvas.getContext("2d"); 


let left = 0; 
let timer = setInterval(function() { 
// 不 断 清空 画布 
ctx.clearRect(0, 0, 700, 550); 
ctx.beginpath( ); 
// 将 颜色 块 填充 为 红色 
ctx.fillStyle = "#f00" ) 
// 持续 在 新 的 位 置 上 绘制 举行 
ctx.fillRect(left, ©0, 100, 100); 
ctx.stroke( ); 
if (left > 700) { 
clearIinterval(timer); 
} 
left += 1; 
}, 16); 
</script> 
</body> 
</html> 


元 素 DOM 对 象 通过 调用 getContext() 可 以 获取 元 素 的 绘制 对 象 ， 然 
后 通过 clearRect 不 断 清空 男 布 并 在 新 的 位 置 上 使 用 filStyle 绘 制 新 和 矩形 
内 容 来 实现 页 面 动画 效果 。 使 用 Canvas 的 主要 优势 是 可 以 应 对 页 面 中 
多 个 动画 元 素 泻 染 较 慢 的 情况 ， 完 全 通过 JavaScript 来 泻 染 控制 动画 的 
执行 ， 这 就 避免 了 DOM 性 能 较 慢 的 问题 ， 可 用 于 实现 较 复 杂 的 动画 。 


requestAnimationFrame 


requestAnimationFrame 是 前 端 表现 层 实现 a 画 的 另 一 种 API 实 现 ， 
它 的 原理 和 setTimeout 及 setInterval 类 似 ， 都 是 通过 JavaScript 持 续 循环 的 
方法 调用 来 触发 动画 动作 的 ， 但 是 requestAnimationFrame 是 浏览 器 针对 
动画 专门 优化 而 形成 的 API， 在 实现 动画 方面 性 能 比 setTimeout 及 
setInterval 要 好 ， 可 以 将 动画 每 一 步 的 操作 方法 传 入 到 
requestAnimationFrame 中 ， 在 每 一 次 执行 完 后 进行 异步 回调 来 连续 触发 
动画 效果 。 


<1DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 


<title> 动 画 移 动 </title> 


<style> 
st 
margin: 0; 
padding: 0; 
} 
div { 
width: 200px; 
height: 200px; 
background-color: red; 
} 
</style> 
</head> 
<body> 


<div id="box"></div> 


<script> 

// 获取 requestAnimationFrame API 对 象 

window.requestAnimationFrame = window.requestAnimationFrame 
| 1 
window.mozRequestAnimationFrame | | 
window.webkitRequestAnimationFrame || 


window.msRequestAnimationFrame; 


let element = document.getElementById("box"); 
let left = 0; 
// 自动 执行 持续 性 回调 


requestAnimationFrame(step); 


// 持续 改变 元 素 位 置 
function step() { 
If (left < window.innerwidth - 200) { 
left += 1; 
element.style.marginLeft = left + "px"; 


requestAnimationFrame(step); 


</script> 
</body> 
</html> 


可 以 看 出 ， 和 setInterval 方 法 类 似 ，requestAnimationFrame 只 是 将 
回调 的 方法 传 入 到 自身 的 参数 中 处 理 执行 ， 而 不 是 通过 setInterval 调 


用 ， 其 他 的 实现 过 程 则 基本 一 样 。 大 家 有 兴趣 也 可 以 去 比较 一 下 这 两 
种 方式 的 性 能 消耗 情况 ，requestAnimationFrame 是 比 setInterval 性 能 消 
耗 低 些 的 。 


总 的 来 看 ， 实 现 动 画 的 方式 主要 包括 这 些 ， 这 里 通过 一 个 简单 的 
案例 ， 向 大 家 介绍 了 六 种 不 同 动画 实现 方案 的 基本 原理 和 具体 实现 。 
虽然 这 是 个 简单 的 案例 ， 但 是 复杂 动画 的 实现 ， 也 是 通过 多 个 简单 动 
画 的 组 合 实现 的 。 考 虑 到 兼容 性 的 问题 ， 在 项 目 实 践 中 ， 一 般 我 们 在 
桌面 浏览 器 端 仍然 推荐 使 用 JavaScript 直 接 实现 动画 的 方式 或 SVG 动画 
的 实现 方式 ， 移 动 端 则 可 以 考虑 使 用 CSS3 transition、CSS3 animation、 


canvas 或 requestAnimationFrame。 


了 解 了 动画 实现 技术 ， 我 们 接 下 来 简单 了 解 一 下 前 端 表 现 层 新 版 
本 CSS4 的 情况 。 


3.6.4 CSS4 与 展望 


目前 CSS 的 成 熟 标准 版 本 是 CSS3， 而 且 在 移动 端 使 用 较 多 。CSS4 
的 规范 仍 在 制定 中 ，W3C 也 在 较 早 的 时 间 公 布 了 一 些 正 在 制定 中 的 
CSS4 规 范 ， 例 如 $e > f、 链 接地 址 伪 类 -: any-link 和 : local-link、 语 言 
相关 伪 类 dir、 新 的 组 分 选择 器 。 这 些 特性 我 们 且 先 不 去 关注 ， 因 为 目 
前 还 没 看 出 太 多 亮点 ， 而 且 实用 性 也 不 是 特别 强 ， 相 比 现 有 的 预 处 理 
器 的 语法 逊色 很 多 。 由 于 兼容 性 问题 ，CSS4 发 布 后 也 会 处 于 与 
ECMAScript 6 类 似 的 处 境 (ECMAScript 6 至 少 还 有 Node.js 支 持 ) ， 需 
要 在 前 端 转译 后 执行 ， 既 然 都 需要 转译 ， 那 便 和 现在 某 个 预 处 理 器 的 
语法 规则 没 差别 了 ， 要 完全 兼容 恐怕 更 是 遥遥 无 期 。 一 种 可 能 的 最 终 
解决 方案 是 和 ECMAScript 6 一 样 借鉴 现 有 一 些 预 处 理 器 的 优点 ， 整 合 


形成 新 的 规范 语法 ， 然 后 通过 预 处 理 器 转译 为 最 终 的 CSS。 这 样 一 个 好 
处 是 ， 不 用 去 纠结 使 用 哪个 预 处 理工 具 ， 全 部 以 CSS4 规 范 为 准 即 可 ， 
但 这 只 是 一 种 可 能 性 。 


简 而 言 之 ，CSS4 的 处 境 将 会 比较 烛 炊 ， 目 前 最 新 的 浏览 器 仍 没 有 
支持 CSS4 特 性 的 计划 ， 发 布 后 不 能 兼容 仍 需 要 转译 ， 就 目前 来 看 ， 
CSS4 新 添加 的 特性 优势 并 不 明显 且 实 用 性 不 强 ， 而 且 不 如 现 有 的 预 处 
理 语法 。 所 以 只 能 看 它 后 面 的 发 展 情 况 了 。 


3.7 ”响应 式 网 站 开发 技术 


前 面 讲 解 了 前 端 春 面 技术 的 CSS 样 式 统一 化 、 预 处 理 和 动画 实现 技 
术 ， 本 节 我 们 一 起 来 看 一 下 现代 前 端 技术 中 另 一 个 重要 的 内 容 一 一 响 
应 式 页 面 实现 技术 。 


3.7.1 ”响应 式 页 面 实现 概述 


通常 认为 ， 响 应 式 设计 是 指 根据 不 同 设备 浏览 器 尺寸 或 分 辩 率 来 
展示 不 同 页 面 结构 层 、 行 为 层 、 表 现 层 内 容 的 设计 方式 。 谈 到 响应 式 
设计 网 站 ， 目 前 比较 主流 的 实现 方法 有 两 种 : 一 是 通过 前 端 或 后 端 判 
断 userAgent 来 跳 转 不 同 的 页 面 完成 不 同 设备 浏览 器 的 适 配 ， 也 就 是 维 
护 两 个 不 同 的 站 点 来 根据 用 户 设备 进行 对 应 的 跳 转 ;) 二 是 使 用 media 
query 媒 体 查 询 等 手段 ， 让 页 面 根据 不 同 设备 浏览 器 自动 改变 页 面 的 布 
局 和 显示 ， 但 不 做 跳 转 。 


先 看 第 一 种 方案 ， 图 3-8 为 目前 一 种 典型 响应 式 站 点 访问 跳 转 的 流 
程 ， 这 里 以 服务 端 通过 判断 请 求 的 userAgent 信 息 为 例 。 要 注意 的 是 ， 
在 浏览 器 端 判断 UserAgent 执 行 跳 转 也 是 可 以 的 ， 但 是 需要 页 面 脚 本 下 
载 完 后 再 执行 判断 跳 转 逻辑 ， 比 服务 端 执 行 跳 转 的 方式 要 慢 。 用 户 使 
用 桌面 浏览 器 和 移动 端 浏览 器 分 别 可 以 访问 到 对 应 的 站 点 ， 但 是 如 果 
使 用 桌面 浏览 器 直接 访问 移动 站 点 域名 下 Web 站 点 页 面 ，Web 站 点 会 根 
据 userAgent 信 息 判 断 进 行 302 跳 转 到 对 应 的 桌面 Web 服 务 器 页 面 路 径 
下 。 使 用 移动 设备 直接 访问 桌面 端 服 务 器 站 点 的 流程 与 此 类 似 。 


www. domain. 人 宗 面 Web 服 务 器 


课 面 浏览 器 根据 userAgent 相 互 跳 转 


移动 端 浏览 器 


m domain. cam 移动 端 Web 服 务 器 
图 3-8 ”典型 响应 式 站 点 实现 


这 样 便 可 以 根据 不 同 的 设备 加 载 相 应 的 网 页 资源 了 ， 根 据 这 种 思 
路 针对 移动 端的 浏览 器 便 也 可 以 请 求 加 载 更 加 优化 后 的 执行 脚本 或 更 
小 的 静态 资源 了 。 根 据 userAgent 进 行 跳 转 会 有 一 定 的 网 络 消耗 ， 但 是 
这 种 方式 下 必须 这 样 ， 该 实现 方案 适用 于 功能 复杂 并 对 性 能 要 求 较 高 
的 站 点 应 用 ， 我 们 再 来 具体 看 一 下 这 种 情况 存在 的 一 些 问题 。 


o 需要 开发 并 维护 至 少 两 个 站 点 跳 转 来 适 配 不 同 用 户 的 设备 浏览 
器 。 例 如 使 用 www.domain.com 和 m.domain.com 来 分 别 指向 桌 
面 浏 览 器 端 和 移动 端 浏 览 器 访问 的 不 同 Web 站 点 服务 ， 然 后 根 
据 userAgent 来 做 对 应 跳 转 。 


o ”选择 使 用 哪个 站 点 内 容 由 设备 的 userAgent 信 息 来 判断 ， 无 法 根 
据 屏幕 尺寸 或 分 辨 率 来 决定 。 


0 一 次 跳 转 。 无 论 是 在 前 端 执 行 跳 转 还 是 后 台 执 行 跳 转 ， 这 
、 能 少 ， 否 则 用 户 体验 相 会 变 


通常 根据 浏览 器 userAgent 来 实现 跳 转 的 方式 也 很 简单 ， 一 般 可 以 
在 页 面 头 部 插入 一 段 JavaScript 代 码 来 判断 或 在 服务 端 通过 统一 的 中 间 
件 执行 跳 转 。 通 常 ， 根 据 userAgent 信 息 执行 页 面 跳 转 的 代码 如 下 。 


// 前 端 页 面 判断 跳 转 
if (navigator.userAgent.match(/iPhone|iPod|Android|iPad/i)) { 
let hash = window.location.hash, 


params = window.1location.search,; 


location.href = '//m.domain.com/path/page.html' + params + 
(hash ? (params ? '&' :; '?') 
+ hash.substr(1) : "''); 


} 


// Web 服务 器 端 判断 跳 转 
if (this.header['user- 
Agent'].match(/iPhone|iPod|Android|iPad/i)) { 

let hash = this.hash, 


params = this.querystring; 
this.redirect('//m.domain.com/path/page.html ' + params + 
(hash ? (params ? '&' :; '?') 
+ hash.substr(1) : "')); 
} 


再 来 看 第 二 种 方案 。 桌 面 浏览 器 和 移动 端 浏览 器 使 用 同一 个 站 品 
域名 来 加 载 内 容 ， 只 需要 开发 维护 一 个 站 点 就 可 以 了 ， 然 后 根据 media 
query 来 实现 不 同 屏幕 下 的 布局 显示 ， 适 用 于 访问 量 较 小 、 性 能 要 求 不 
高 的 应 用 场景 ， 例 如 使 用 Bootstrap 这 类 响应 式 自 动 布局 框架 实现 的 网 
站 。 当 然 ， 这 种 方式 也 存在 一 些 明显 的 问题 。 


o 移动 端 浏览 器 加 载 了 与 朱 面 端 浏览 器 相同 的 资源 ， 例 如 图 片 、 
脚本 资源 等 ， 导 致 移动 端 加 载 到 宛 余 或 体积 较 大 的 资源 。 对 
于 网 络 和 计算 资源 相对 较 少 的 移动 端 来 说 ， 这 显然 不 是 一 
很 好 的 处 理 方案 。 虽 然 可 以 经 过 一 些 优化 来 碱 少 一 部 分 移动 
端 加 载 的 内 容 ， 但 是 能 做 的 非常 有 限 ， 不 能 完全 解决 这 个 问 


题 。 


o 桌面 端 浏览 器 和 移动 端 浏览 器 访问 站 点 需要 展示 的 内 容 可 能 
完全 相同 ， 这 种 响应 式 的 方式 只 实现 了 内 容 布局 显示 的 适 
应 ， 但 是 要 做 更 多 差异 性 的 功能 比较 难 。 


o 桌面 端 浏览 器 和 移动 端 浏览 器 页 面 功 能 本 身 具有 差异 性 ， 使 用 
同一 套 处 理 方式 ， 会 有 更 多 的 兼容 性 问题 。 


响应 式 页 面 设计 一 直 是 一 个 很 难 完美 解决 的 问题 ， 因 为 多 多 少 少 
都 存在 这 些 问题 。 带 着 这 些 间 题 ， 我 们 再 来 看 看 响应 式 页 面 设 计 具 体 
应 该 怎样 做 。 先 来 总 结 一 下 上 面 这 两 种 方案 的 所 有 问题 描述 。 


o 能 否 使 用 同一 个 站 总 域名 避免 跳 转 的 问题 
o 能 否 保证 移动 端 加 载 的 资产 内 容 最 优 
o 如 何 做 移动 端 和 桌面 端 浏览 器 的 差异 化 功能 


o 如何 根据 更 多 的 信息 进行 更 加 灵活 的 判断 ， 而 不 仅仅 是 


userAgent 


经 过 综合 性 方案 分 析 ， 可 以 得 出 结论 : 合理 的 开发 方式 和 网 站 访 
问 架 构 设 计 是 可 以 解决 上 述 四 个 问题 的 。 下 面 我 们 来 看 看 在 响应 式 的 
三 层 结 构 上 具体 能 做 什么 处 理 。 


3.7.2 ”结构 层 响 应 式 


结构 层 响 应 式 设计 可 以 理解 成 HTML 内 容 的 自 适应 泻 染 实现 方式 ， 
即 根据 不 同 的 设备 浏览 器 泻 染 不 同 的 页 面 内 容 结 构 ， 而 不 是 直接 进行 
页 面 跳 转 。 这 里 页 面 中 结构 层 泻 染 的 方式 可 能 不 同 ， 包 括 前 端 泻 染 数 
据 和 后 端 演 染 效 据 ， 这 样 主要 就 有 两 种 不 同 的 设计 思路 了 : 一 是 页 面 
内 容 是 在 前 端 演 染 ， 二 是 页 面 内 容 在 后 端 泻 染 (也 就 是 直 出 层 ， 我 们 
后 面 会 具体 讲 到 这 个 ) 。 


结构 层 数据 内 容 响 应 式 
目前 仍 有 较 多 的 网 站 使 用 的 是 前 后 端 分 离 、 前 端 数据 演 染 的 方式 


实现 的 ， 尤 其 是 移动 端 页 面 。 这 种 情况 下 如 果 要 做 到 结构 层 响 应 式 就 
要 考虑 到 ， 首 先 要 保证 移动 端 加 载 的 内 容 资源 最 小 ， 因 此 会 以 移动 端 


优化 资源 为 主 ， 保 证 移动 端 页 面 的 首 屏 内 容 优先 加 载 ， 然 后 通过 有 异步 
的 方式 来 实现 桌面 端 或 移动 端 剩余 内 容 的 加 载 。 


这 样 似乎 就 没有 问题 了 ， 其 实 这 样 在 最 先 加 载 的 页 面 HTML 文 件 内 
容 中 ， 桌 面 端 浏览 器 加 载 的 内 容 中 不 可 避免 会 有 少量 的 移动 端 几 余 内 
容 ， 而 且 值 得 注意 的 是 ， 一 般 下 载 的 HTML 文件 内 容 在 桌面 端 和 移动 端 
会 有 差异 化 内 容 存 在 ， 这 是 不 可 避免 的 ， 所 以 我 们 只 能 尽 可 能 减少 差 
异化 内 容 来 保证 隐 余 资产 减 到 最 小 。 但 即使 不 能 避免 ， 由 于 桌面 端的 
计算 资源 和 网 络 资源 相对 比较 宽容， 这 些 也 是 可 以 接受 的 ， 这 毕竟 比 
移动 端 浏览 器 加 载 桌 面 端的 见 余 内 容 好 多 了 。 


具体 来 看 ， 我 们 根据 不 同 平台 浏览 器 的 情况 加 载 不 同 的 异步 静态 
JavaScript， 然 后 异步 泻 染 不 同 的 模块 内 容 ， 生 成 不 同 的 表现 层 结 构 就 
可 以 如 下 来 实现 。 


// isMobile 是 根据 userAgent、 屏 幕 尺寸 或 屏幕 分 辨 率 判 断 是 否 为 移动 端 设备 的 
结果 
let isMobile = 
navigator .userAgent.match(/iPhone|ipPod|Android|iPad/i); 
if(isMobile){ 
require.async(['zepto', './mobileMain'], function($, main)t{ 
main.init(); 
}); 
}elsef{ 
require.async(['jQuery', './main'], function($, main)t{ 
main.init(); 


}); 


// ./main.js 文件 内 容 
module.exports = { 
init: function()t{ 


$('#article' ).html(PC: 这 是 桌面 端 浏 览 器 内 容 '); 


// ./mobileMain.js 文件 内 容 
module.exports = { 
init: function(){ 


$('#article' ).html('mobile: 这 是 移动 端 浏览 器 内 容 ' ) ; 


如 图 3-9 所 示 ， 桌 面 端 浏 览 器 和 移动 端 浏览 器 直接 加 载 到 的 HTML 
结构 是 相同 的 ， 由 于 页 面 的 数据 内 容 主 要 在 前 端 泻 染 ， 那 么 就 可 以 使 
用 异步 的 方式 加 载 桌 面 端 或 移动 端 不 同 的 JavaScript 资 源 列表 来 泻 染 不 
同 的 前 端 数 据 内 容 了 。 为 了 保证 我 们 使 用 移动 端 打 开 的 页 面 加 载 到 相 
对 最 优 的 页 面 资源 内 容 ， 我 们 也 可 以 使 用 异步 的 方式 来 加 载 CSS 文 件 ， 
这 样 就 可 以 做 到 根据 移动 端 页 面 和 桌面 端 页 面 加 载 到 不 同 的 资产 内 容 
Fe 


前 端 资源 A 列表 : [ jquery ,， main ] 


前 端 资源 B 列 表 : [zepto  ，mbileMain” ] 


Web 服 务 器 


移动 端 浏览 器 


图 3-9 ”前 端 内 容 响 应 式 泻 染 方 式 


使 用 这 种 方式 尽管 可 以 让 桌面 端 和 移动 端 复 用 一 个 页 面 并 做 到 页 
面 的 差异 化 ， 但 是 由 于 使 用 了 同一 个 HIML 结 构 模 板 为 基础 进行 演 染 和 
操作 ， 因 此 页 面 的 功能 实现 仍然 有 部 分 耦合 的 地 方 。 


后 端 数据 泻 染 响 应 式 


除了 前 端 数据 泻 染 的 方式 ， 目 前 还 有 一 部 分 网 站 的 内 容 生 成 使 用 
了 后 端 泻 染 的 实现 方式 。 这 种 情况 的 处 理 方 式 其 实 可 以 做 到 更 优化 ， 
只 要 尽 可 能 将 果 面 端 和 移动 的 业务 层 模 板 分 开 维 护 就 可 以 了 。 在 模板 
选择 判断 时 仍 是 可 以 通过 userAgent 甚 至 URL 参 数 来 进行 的 。 


// isMobile 是 根据 userAgent、URL 参数 判断 是 否 为 移动 端 设备 的 结 
let isMobile = this.headers['user- 
Agent'].match(/iPhone|iPod|Android|iPad/i); 
if (isMobile) { 
res.body = yield render('pages/mobile/main', { 
data: pageData 
}); 


} else { 
res.body = yield render('pages/pc/main', { 
data: pageData, 


moreData: moreData 


}); 


// pages/mobile/main 模板 内 容 
<1DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title> 移 动 端 内 容 </title> 
<meta name="viewport" content="width=device-width, initial- 
scale=1.0,maximum-scale= 
1.0,user-scalable=no"> 
<link rel="stylesheet" href="./mobile/path/main.css"> 
</head> 
<body> 
<section>{{ data || safe }}</section> 
<script src="./mobile/main.js"></script> 
</body> 
</html> 


// pages/pc/main 模板 内 容 
<!IDOCTYPE html> 


<html lang="en"> 


<head> 
<meta charset='"utf-8"> 
<title> 桌 面 端 内 容 </title> 
<link rel="stylesheet" href="./pc/path/main.css"> 
</head> 
<body> 
<div>{{ data || safe }}</div> 
<div>{{ moreData || safe}}</div> 
<script src="./pc/main.js"></script> 
</body> 


</html> 


如 图 3-10 所 示 ， 直 出 层 以 Node 为 例 ， 在 生成 页 面 内 容 时 可 以 判断 
用 户 的 userAgent 来 泻 染 不 同 的 HTML 输出 模板 。 这 里 不 同 的 模板 内 容 
可 以 完全 不 一 样 ， 并 可 以 独立 维护 ， 这 样 就 能 根据 同一 个 地 址 直 出 不 
同 的 内 容 了 ， 例 如 在 桌面 端 或 移动 端 浏览 器 中 打开 Google 搜 索 首 页 
时 ， 同 一 个 地 址 展示 的 内 容 却 不 一 样 ， 便 是 根据 这 种 思路 来 实现 的 。 
当然 这 里 用 的 模板 最 好 是 根据 组 件 化 开发 分 开打 包 生 成 的 两 个 不 同 模 
板 ， 否 则 后 期 维护 成 本 就 比较 高 了 。 


bey 


桌面 浏览 器 


桌面 端 提取 模板 


Web 服 务 器 移动 端 提 取 模板 


移动 端 浏览 器 


图 3-10 ”后 端 内 容 响应 式 泻 染 方 式 


这 种 情况 下 我 们 就 可 以 完全 将 桌面 端 页 面 和 移动 端 页 面 结构 层 分 
开 管 理 了 ， 不 仅 可 以 复 用 共同 的 基础 组 件 ， 还 可 以 差异 化 开发 不 同 的 
业务 组 件 ，JavaScript 资 源 和 CSS 资 源 也 是 完全 分 开 加 载 的 ， 实 现 两 个 
端 加 载 内 容 的 相互 独立 ， 就 解决 了 上 面 描述 的 所 有 问题 。 当 然 ， 越 接 
近 完 美的 实现 需要 付出 的 代价 也 往往 越 大 ， 这 种 实现 方式 通常 不 可 避 
免 地 要 将 桌面 端 和 移动 端 结合 起 来 同步 开发 。 大 家 也 可 以 根据 自己 团 
队 的 技术 架构 和 具体 情况 来 选择 尝试 这 种 开发 模式 ， 不 仅 如 此 ， 这 种 
实现 思路 也 很 适合 大 型 应 用 站 点 的 实践 。 


如 图 3-11 所 示 ， 使 用 在 直 出 层 响应 式 演 染 输出 不 同 页 面 内 容 的 模式 
也 很 容易 结合 业务 接 入 层 进 行 大 型 应 用 的 开发 。 使 用 组 件 化 思路 ， 前 
端 工程 师 可 以 专注 于 前 端 模块 的 开发 ， 构 建 后 生成 直 出 层 的 不 同 的 数 
据 模板 ， 直 出 层 则 用 于 调用 业务 层 服 务 模 块 来 获取 处 理 的 数据 ， 然 后 
根据 userAgent 判 断 不 同 的 浏览 器 设备 调用 不 同 的 模板 泻 染 出 不 同 的 页 
面 结构 。 


闻 
移动 端 浏览 器 


业务 接 入 层 业务 接 入 模块 A 业务 接 入 模块 B 业务 接 入 模块 N 


底层 服务 层 数据 缓存 服务 数据 文件 服务 数据 库 服务 


图 3-11 ”后 端 响应 式 内 容 泻 染 更 加 复杂 的 架构 


结构 层 媒体 响应 式 


通过 对 不 同 开发 模式 中 数据 泻 染 思路 的 分 析 ， 我 们 基本 解决 了 结 
构 层 HTML 响 应 式 所 面临 的 主要 问题 。 细 节 上 ， 有 一 点 需要 重点 强调 : 
结构 层 媒体 响应 式 的 实现 。 根 据 统 计 ， 目 前 主要 网 站 60% 以 上 的 流量 数 
据 来 自 图 片 ， 所 以 如 何在 保证 用 户 访 问 网 页 体验 不 降低 的 前 提 下 尽 可 
能 地 降低 网 站 图 片 的 输出 流量 具有 很 重要 的 意义 。 


通常 在 我 们 手机 访问 网 页 时 ， 请 求 的 图 片 可 能 还 是 加 载 了 与 桌面 
端 浏览 器 相同 的 大 图 ， 文 件 体积 大 ， 消 耗 流量 多 ， 请 求 延 时 长 。 媒 体 
响应 式 要 解决 的 一 个 关键 问题 就 是 让 浏览 器 上 的 展示 媒体 内 容 尺 寸 根 
据 屏幕 宽度 或 屏幕 分 辩 率 进行 目 适应 调节 。 当 然 这 里 提 到 的 媒体 主要 


是 指 图 片 ， 即 我 们 需要 根据 浏览 器 设备 屏幕 宽度 和 屏幕 的 分 辨 率 来 加 
载 不 同 大 小 尺寸 的 图 片 ， 避 免 在 移动 端 上 加 载体 积 过 大 的 资源 ， 下 面 
来 看 看 前 端 图 片 响应 式 的 几 种 常见 解决 方案 。 


1. 使 用 Media Query 背 景 图 片 代替 


前 端 结构 层 图 片 响应 式 一 个 常见 的 方案 是 使 用 背景 图 片 引 入 来 引 
入 页 面 上 的 图 片 ， 并 在 CSS 中 通过 Media Query 来 判断 加 载 所 需要 的 不 

同 背 景 图 片 ， 这 样 浏览 器 就 会 根据 浏览 器 设备 的 屏幕 宽度 或 屏幕 分 辩 
率 来 加 载 不 同 的 图 片 了 。 


, Image { 
background-image: url('path/image/picture.jpg? 
w/1080/h/768.jpg' ); 
-webkit-background-size: 100% 100%; 


background-size: 100% 100%; 


@media only Screen and (max-width: 414px) { 
, Image { 
background-image: url('path/image/picture.jpg? 
w/540/h/384.jpg' ); 
} 


@media only screen and (max-width: 375px) { 
, Image { 


background-image: url('path/image/picture.jpg? 


w/270/h/192.jpg'); 


@media only Screen and (max-device-pixel-ratio: 2) { 
, Image { 
background-image: url('path/image/picture.jpg? 
w/270/h/192.jpg'); 
} 


@media only screen and (min-device-pixel-ratio: 2) { 
, Image { 
background-image: url('path/image/picture.jpg? 
w/540/h/384.jpg' ); 
} 


例如 此 处 地 址 带 有 ? w/1080/h/768、?w/540/h/384、?w/270/h/192 参 
数 的 图 片 分 别 表示 大 图 片 、 中 图 片 、 小 图 片 。 在 屏幕 宽度 小 于 375 像 素 
或 屏幕 分 辩 率 小 于 2 时 ， 使 用 小 图 片 展 示 ; 如 果 屏 幕 宽度 在 375 像 素 到 
414 像 素 之 间或 屏幕 分 辨 率 大 于 等 于 2 时 ， 则 使 用 中 图 片 显 示 ; 否则 使 
用 大 图 片 显 示 。 使 用 这 种 方法 可 以 较 好 地 解决 移动 端 和 桌面 端 不 同 浏 
览 器 下 响应 式 图 片 的 加 载 问题 ， 但 是 这 里 的 图 片 由 于 是 背景 图 片 ， 无 
法 定义 页 面 图 片 属性 和 描述 内 容 ， 不 利于 搜索 引擎 优化 (Search Engine 
Optimization，SEO) ， 也 不 能 在 图 片 加 载 失 败 时 给 予 文字 提示 ， 而 且 


如 果 图 片 内 容 是 动态 生成 的 ， 那 么 就 需要 修改 标签 元 素 的 style 属 性 来 


设置 背景 图 ， 显 然 这 是 不 合理 的 。 


由 于 高 清 屏 的 特性 ， 以 2 倍 Retina 高 清 屏 的 移动 设备 为 例 ，CSS 
中 的 1px 是 由 2x2 个 屏幕 物理 像素 点 来 泻 染 的 ， 那 么 样式 上 的 
border:1px 在 Retina 高 清 屏 下 会 泻 染 成 2 个 物理 像素 宽度 或 高 度 的 边 
框 ， 有 时 为 了 追求 1px 精 准 的 还 原 ， 不 得 不 思考 其 他 的 方法 来 解决 这 
个 问题 。 实 现 1px 边 框 的 方式 比较 多 ， 通 常 可 以 设置 元 素 after 或 
before 伪 元 素 为 1px 内 容 ， 并 使 用 transform : scaleY 
(1/devicePixelRatio) 来 进行 单方 向 的 缩放 实现 1 个 物理 像素 的 边框 
或 内 容 。 对 于 字体 ， 我 们 也 可 以 设置 transform: scale(.5) 在 浏览 器 中 
支持 显示 小 于 12px 的 文字 。 同 时 如 果 页 面 的 内 容 因 为 使 用 高 清 屏 而 
导致 模糊 ， 则 需要 使 用 -webkit-font-smoothing: antialiased 来 尝试 修 
复 。 


2 .Picture 标 签 元 素 


除了 使 用 Media Query 来 实现 图 片 响应 式 的 展示 外 ，W3C 已 经 有 了 
一 个 用 于 实现 响应 式 图 形 的 草案 ， 即 新 定义 的 HTML5 标 签 <picture>， 
但 因为 它 还 只 是 草案 ， 目 前 还 没有 较 多 支持 的 浏览 器 ， 因 此 只 能 期 待 
在 不 久 的 未 来 我 们 能 用 上 。 尽 管 目前 不 支持 ， 但 其 还 是 可 以 作为 一 种 
可 选 的 实现 方案 ，<picture> 元 素 标 签 是 一 个 类 似 <img> 展 示 图 片 的 元 
素 ， 但 图 片 内 容 是 由 多 个 源 图 组 成 ， 并 能 根据 屏幕 的 特性 选择 使 用 不 
同 的 图 片 ， 举 例如 下 。 


<picture width="500" height="500"> 
<source media="(min-width: 640px)" srcset="large-1.jpg 1x, 
large-2.jpg 2x"> 
<source media="(min-width: 320px)" srcset="middle-1.jpg 1x, 
middle-2.jpg 2x"> 
<source srcset="small-1.jpg 1x, small-2.jpg 2x"> 
<img src="small-1.jpg" alt=""> 
<p>Accessible text</p> 
<noscript> 
<img src="external/imgs/small.jpg" alt="Team photo"> 
</noscript> 
</picture> 
3 
source: 表示 <picture> 的 一 个 图 片 源 ; 
media: 媒体 查询 ， 用 于 适 配 屏幕 尺寸 ; 
srcset: 图 片 链接 ，1x 适应 普通 屏 ，2x 适应 高 清 屏 ; 
<noscript/>: 当 浏 览 器 不 支持 脚本 时 的 一 个 替代 方案 ; 
<img/>: 初始 图 片 ; 另外 还 有 一 个 无 障碍 文本 ， 类 似 <img/> 的 alt 属性 。 
- -> 


<picture> 


从 这 个 例子 来 看 ， 当 用 户 浏览 器 在 屏幕 宽度 大 于 640 像 素 时 ， 如 果 
屏幕 分 辨 率 为 1 则 使 用 large-1.jpg， 分 辨 率 为 2 则 使 用 large-2.jpg; 当 屏 幕 
宽度 在 320 像 素 到 640 像 素 之 间 时 ， 屏 幕 分 辨 率 为 1 则 使 用 middle-1.jpg， 
分 辨 率 为 2 则 使 用 middle-2.jpg; 其 他 情况 下 ， 如 果 屏 幕 分 辨 率 为 1 则 使 
用 small-1.jpg， 分 辨 率 为 2 则 使 用 small-2.jpg。 这 样 就 可 以 根据 不 同 浏 览 
器 屏幕 特性 来 解决 图 片 响 应 式 的 问题 了 。 


目前 由 于 大 部 分 主流 的 浏览 器 还 不 支持 <picture> 元 素 ， 但 它 的 原 
理 是 我 们 可 借鉴 的 ， 所 以 就 有 了 用 于 图 片 响应 式 处 理 <picture> 元 素 的 
Polyfill (Polyfill 是 指使 用 第 三 方 手段 让 浏览 器 支持 浏览 器 原本 并 不 支 
持 的 新 特性 ) 思 Picturefill。 Picturefill 是 W3C 提 供 的 最 新 的 针对 
响应 式 图 片 的 设计 方案 ， 解 析 的 过 程 主要 如 下 : 通过 JavaScript 脚 本 获 
取 <picture> 元 素 中 的 Source 源 以 及 CSS Media Queries 规 则 ， 再 根据 浏览 
器 的 尺寸 或 分 辩 率 信息 将 对 应 的 图 片 路 径 赋 值 给 <img> 标 签 的 src 属 性 来 
加 载 不 同 的 图 片 ， 从 而 兼容 现 有 不 支持 <picture> 元 素 的 浏览 器 。 相 比 
之 下 ， 这 种 方式 也 为 图 片 响应 式 提 供 了 另 一 个 可 选 的 方案 ， 但 仍 需要 
考虑 Picturefill 的 性 能 解析 问题 ， 尤 其 是 在 移动 端 图 片 较 多 的 页 面 ， 对 
应 每 个 图 片 都 需要 去 解析 ， 可 能 会 因为 解析 速度 慢 而 阻塞 其 他 页 面 脚 
本 逻辑 的 执行 。 


这 里 要 注意 的 是 ， 浏 览 器 端的 Polyfil 和 shim 差 别 很 小 ， 其 实 可 
以 认为 基本 是 没有 区 别 的 ， 都 是 为 了 解决 旧 的 浏览 器 对 于 新 特性 的 
支持 和 兼容 性 问题 。 例 如 ，es5-shim.js 是 为 了 让 旧 的 浏览 器 支持 
ECMAScript 5 的 特性 ;Picturefill 是 为 了 让 旧 的 浏览 器 支持 解析 
HTML5 的 <picture> 新 标签 。 


3. 模板 判断 响应 式 图 片 


在 前 端 泻 染 数据 的 开发 模式 下 ， 使 用 前 端 模板 进行 判断 泻 染 输出 
不 同 的 图 片 是 最 简单 、 最 直接 的 响应 式 图 片 实现 方式 。 我 们 可 以 判断 
浏览 器 userAgent 或 检测 是 否 高 清 屏 let isRetina= window.devicePixelRatio 


> 1; 来 填充 不 同 尺 寸 的 图 片 地 址 到 页 面 模板 中 。 这 种 方法 实质 上 和 


<picture> 元 素 的 Polyfi 训 思路 类 似 ， 但 是 更 直接 、 更 易 理解 实现 。 例 如 
直接 在 前 端 泻 染 的 模板 中 就 可 以 如 下 使 用 。 


{% if isMobile && isRetina %} 

<img src="{{path}}/picture.jpg?w/540/h/384" alt=" 中 图 "> 
{% elseif isMobile %} 

<img src="{{path}}/picture.jpg?w/270/h/192" alt=" 小 图 "> 
{% else %} 

<img src="{{path}}/picture.jpg?w/1080/h/768" alt=" 大 图 "> 
{% endif %} 


里 前 端 模板 首先 判断 浏览 器 是 否 为 移动 端 浏览 器 ， 同 时 判断 屏 
若 为 移动 端 浏 览 器 且 为 高 清 屏 幕 ， 则 使 用 中 图 片 ， 如 果 是 
移动 端 浏览 器 ， 但 不 是 高 清 屏幕 ， 则 使 用 小 图 片 ) 否则 为 桌面 端 浏览 
器 使 用 大 图 片 泻 染 。 用 这 种 方式 处 理 起 来 就 很 直接 了 ， 当 然 这 种 方式 
除了 能 在 前 端 模板 数据 演 染 时 使 用 以 外 ， 也 能 应 用 于 后 人 台 或 直 出 层 页 
面 模板 的 判断 。 所 以 在 目前 <picture> 元 素 支持 不 成 熟 且 不 想 用 背景 图 
片 代替 的 方式 前 担 下， 使 用 模板 来 直接 判断 是 很 适用 的 方案 。 


4. 图 片 服务 器 判断 输出 内 容 


如 果 觉 得 在 模板 中 使 用 判断 的 方式 泻 染 不 同 的 图 片 依然 显得 比较 
麻烦 ， 我 们 也 可 以 在 图 片 服 务 器 上 进行 自 适 应 修改 。 试 想 ， 如 果 将 图 
片 输出 的 判断 逻辑 放 在 后 台 图 片 静 态 服 务 器 或 内 容 分 发 网 络 (Content 
Deliver Netvork，CDN) 上 处 理 ， 就 不 用 关心 这 些 问 题 了 ，CDN 的 基本 
思想 是 尽 可 能 避 开 互联 网 上 有 可 能 影响 数据 传输 速度 和 稳定 性 的 环 
节 ， 实 现 内 容 的 快速 、 稳 定 传输 。 通 常 这 种 方案 是 通过 浏览 器 访问 服 
务 器 图 片 时 带 上 浏览 器 的 userAgent 或 UREL 参 数 等 信息 来 实现 的 ， 服 务 


器 读 取 到 这 些 信息 后 结合 userAgent 的 不 同 浏览 器 特点 输出 不 同 大 小 的 
图 片 。 总 之 ， 可 以 简单 理解 为 将 设备 浏览 器 的 判断 放 在 图 片 服务 器 上 
实现 ， 对 于 同一 个 图 片 URL 使 用 什么 尺寸 的 图 片 输出 完全 由 图 片 服 务 
器 决定 。 


是 一 个 服务 端的 解决 方案 ， 优 点 是 前 端 几 乎 不 用 做 任何 修改 就 
i 现 不 同 大 小 的 图 片 ， 因 此 可 以 快 
捷 地 应 用 于 历史 的 项 目 迁 移 改造 中 ， 而 且 不 会 有 兼容 性 问题 。 例 如 在 
前 端 图 片 的 请 求 蜂 可 以 这 上 请 求 的 简单 参数 ， 这 样 服务 器 不 仅 可 以 目 
动 输出 对 应 的 图 片 内 容 ， 而 且 还 可 以 根据 指定 的 参数 进行 优化 格式 输 
出 。 


<img src="{{path}}/picture.jpg?retina=2&format=webp" alt=" 图 片 "> 


3.7.3 ”表现 层 响应 式 


了 解 完 结构 层 响应 式 ， 我 们 再 来 看 一 下 表现 层 响 应 式 的 具体 实 
现 。 这 里 至 少 要 了 解 两 个 方面 的 内 容 : 响应 式 布 局 和 屏幕 适 配 布 局 。 
响应 式 布 局 是 根据 浏览 器 宽度 、 分 辨 率 、 横 屏 、 坚 屏 等 情况 来 自动 改 
变 页 面 元 素 展示 的 一 种 布局 方式 ， 一 般 可 以 使 用 栅 格 方式 来 实现 ， 
现 思路 有 两 种 : 一 种 是 桌面 端 浏览 器 优先 ， 扩 展 到 移动 端 浏览 器 
配 ; 另 一 种 则 是 以 移动 端 浏 览 右 优先 ， 扩 展 到 桌面 端 浏览 器 适 配 。 
于 移动 端的 网 络 和 计算 资源 相对 较 少 ， 所 以 一 般 比 较 推 荐 从 移动 端 扩 
展 到 果 面 出 的 方式 进行 适 配 ， 这 样 就 避免 了 在 移动 端 加 载 见 余 的 桌面 

端 CSS 样 式 内 容 。 而 屏幕 适 配 布局 则 是 主要 针对 移动 端的 ， 由 于 目前 移 
动 端 设备 屏幕 大 小 各 不 相同 ， 屏 幕 适 配 布 局 是 为 了 实现 网 页 内 容 根据 


移动 端 设备 屏幕 大 小 等 比例 缩放 所 提出 的 一 种 布局 计算 方式 。 我 们 先 


来 看 下 页 面 的 响应 式 布 局 。 


响应 式 布局 


响应 式 布局 的 思路 比较 直接 ， 一般 是 通过 栅 格 系统 来 解决 百分比 
方式 布局 。 例 如 我 们 希望 一 些 元 素 的 宽度 在 桌面 端 浏览 器 上 按 一 定 比 


例 布局 ， 而 在 移动 端 统一 占用 一 行 ， 那 么 就 可 以 采用 如 下 方式 。 


.Tow { 
width: 100%; 
} 
,row .coOl-1 { 
width: 8.33333333333%; 
} 
,row ,ColL-2 { 


width: 16.6666666667%; 


/* .. .比较 多 ， 此 处 省 略 */ 
,row ,ColL-12 { 


width: 100%; 


/* 屏幕 宽度 小 于 414px 的 情况 */ 
@media only Screen and(max-width: 414px) { 


,row .coOl-1, .row .co0l-2, ,row .co0l-3, .row .col-4, 


.TOW 


.COl1-5, .row .CoOL-6， .row 
.COl1-7, ,row .col-8, .row .col-9, ,row ,col-10， .row .col-11 { 


width: 100%,; 


/* 坚 屏 的 情况 “/ 


@media screen and (orientation: portrait)t{ 


/* 横 屏 的 情况 “/ 


@media screen and (orientation: landscape)t{ 


栅 格 化 布局 通常 会 将 屏幕 宽度 等 分 成 多 个 固定 的 栅 格 (以 12 格 为 
例 ) ， 在 屏幕 宽度 大 于 414px 的 情况 下 ， 每 个 栅 格 的 元 素 使 用 宽度 为 按 
照 列 数 定 义 父 元 素 的 百分比 宽度 ; 在 屏幕 宽度 小 于 414px 的 情况 下 ， 判 
断 是 移动 端 设备 或 浏览 器 宽度 较 宕 ， 所 有 的 栅 格 元 素 宽 度 设置 为 
100%， 这 就 避免 了 移动 端 屏幕 上 容器 宽度 按 自 分 比 计算 较 小 的 问题 。 
此 外 也 可 以 根据 移动 端 设备 横 屏 或 坚 屏 的 情况 添加 特殊 的 样式 规则 。 


<div class="row col-1"></div> 
<div class="row col-2"></div> 
<div class="row col-4"></div> 
<div class="row col-8"></div> 


<div class="row col-12"></div> 


图 3-12 为 上 面 HIML 结 构 内 容 在 浏览 器 窗口 分 别 大 于 414px 和 小 于 
414px 的 情况 ， 这 样 实现 就 保证 了 移动 端 浏 览 器 上 元 素 布 局 的 自 适 应 显 
示 ， 让 移动 端 内 容 的 布局 更 加 合理 清晰 。 


图 3-12 ” 栅 格 化 布局 展示 效果 


屏幕 适 配 布局 


屏幕 适 配 布局 是 在 移动 端 解决 内 容 按照 不 同 屏幕 大 小 自动 等 比例 
缩放 的 一 种 布局 计算 方式 。 屏 幕 适 配 布局 和 响应 式 布 局 是 不 同 的 ， 一 
般 只 在 移动 端 使 用 。 通 常 在 移动 端 页 面 上 ， 首 先 为 了 固定 浏览 器 对 
HTML 文 件 的 泻 染 ， 会 在 HITML 的 <head> 里 面 加 上 下 面 一 段 <meta> 声 明 
来 控制 页 面 使 用 移动 端 浏览 器 展示 并 保持 内 容 不 缩放 。 


<meta name="viewport" content="width=device-width,initial- 
scale=1, maximum-scale=1, 


user-scalable=no"/> 


这 里 通过 <meta> 控 制 页 面 的 不 缩放 和 我 们 屏幕 适 配 布局 根据 不 同 
屏幕 大 小 自动 缩放 的 概念 是 不 同 的 。<meta> 中 viewport 控 制 的 缩放 是 在 
屏幕 宽度 确定 后 浏览 器 的 视窗 内 容 不 随 用 户 的 操作 而 缩放 ， 而 屏幕 适 


配 布局 的 自动 缩放 是 在 屏幕 宽度 不 确定 的 情况 下 页 面 元 素 展 示 内 容 与 
宽屏 大 小 保持 比例 不 变 。 不 然 ， 可 能 我 们 在 小 屏 移动 设备 上 显示 正常 
的 字体 在 大 屏 手 机 上 显示 视觉 上 就 可 能 很 小 了 。 


以 320px 宽 度 的 移动 设备 屏幕 和 414px 宽 度 的 移动 设备 屏幕 比较 来 
看 ， 图 3-13 是 使 用 模拟 器 在 屏幕 宽度 为 320px 的 浏览 器 和 屏幕 宽度 为 
414px 的 浏览 器 中 打开 同一 个 页 面 的 情况 ， 页 面 中 宽度 为 160px 的 容器 
在 320px 宽 度 的 屏幕 下 面 占 总 宽度 的 50%， 而 在 414px 宽 度 的 屏幕 下 面 显 
然 没 有 占 到 50%， 而 且 不 同 屏幕 下 面 能 显示 同等 大 小 的 字体 个 数 也 是 不 
相同 的 ， 屏 幕 宽 度 为 414px 的 屏幕 下 面 一 行 可 以 显示 更 多 的 字数 ， 这 样 
就 导致 了 页 面 内 容 展 示 在 不 同 移动 端 屏 幕 上 不 一 致 。 对 于 这 类 屏幕 适 
配 布局 问题 ， 我 们 通常 有 两 种 处 理 方法 ， 即 依据 HTML 中 <html> 标 签 元 
素 的 zoom 属性 缩放 和 根据 REM 自 适 配 方案 实现 等 比例 缩放 。 


iphone5Y 320 x 568 100% © iphone6Plus 了 4i4 x 736 i00%v © 


宽度 160px 
宽度 160px 


宽度 为 414 像 素 的 移动 浏 
Din 


图 3-13 ”不同 大 小 屏幕 下 页 面 显示 效果 


1. zoom 属性 控制 方案 


如 果 和 希望 在 320px 宽 度 屏 幕 上 显示 的 内 容 在 414px 的 宽度 屏幕 上 进 
行 等 比例 自动 放大 ， 可 以 考虑 使 用 元 素 CSS 的 zoom 属 性 来 尝试 解决 。 
例如 我 们 可 以 设置 <html> 或 <body> 标 签 的 CSS 属 性 为 “zoom: 1.29375”， 
其 中 1.29375 = 414/320 ， 即 将 zoom 的 值 按照 屏幕 宽度 的 320 分 之 一 计 
算 ， 然 后 赋 给 HTML 文 档 的 <html> 或 <body> 元 素 样 式 就 可 以 了 。 这 种 
情况 我 们 使 用 414px 宽 度 的 移动 端 屏幕 打开 同一 个 页 面 看 到 的 内 容 比例 


和 在 320px 宽 度 移 动 端 浏览 器 打开 看 到 的 内 容 比 例 是 一 致 的 。 使 用 
JavaScript 就 可 以 按 如 下 方式 来 设置 body 的 zoom 属性 。 


document.body.style.zoom = Screen.width/320 ; 


如 图 3-14 所 示 ， 通 过 实践 ， 加 上 "zoom: 1.29375" 属 性 后 ， 在 宽度 为 
414px 的 屏幕 上 的 内 容 显示 比例 和 宽度 为 320px 的 屏幕 上 保持 一 致 。 这 
种 方式 实现 很 简洁 ， 但 是 这 个 zoom 值 通 常 需 要 通过 JavaScript 计 算得 
出 ， 如 果 JavaScript 在 页 面 泻 染 之 后 完成 ， 则 会 出 现 页 面 内容 全 部 重 排 
的 情况 ， 所 以 我 们 需要 尽量 在 页 面 文档 开始 的 地 方 给 <html> 或 <body> 
设置 zoom 属性 。 但 是 这 样 处 理 之 后 ， 其 他 屏幕 下 面 的 缩放 参考 尺寸 必 
须 全 部 按照 这 个 固定 的 比例 来 缩放 ， 显 得 不 太 有 灵活 。 
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宽度 160px 


图 3-14 ”使 用 zoom 属性 缩放 后 展示 效果 


2. REM 屏 幕 适 配方 案 


REM 方 案 目 前 应 用 广泛 。 我 们 知道 标签 元 素 的 CSS 大 小 尺寸 的 表 
示 单 位 主要 有 像素 px、 相 对 父 元 素 大 小 百分比 %、 相 对 于 当前 对 象 内 文 
本 字体 font-size 的 大 小 em、 相 对 于 文档 根 元 素 font-size 的 大 小 rem (当然 
还 有 新 的 vh、vw、vmax、vmin， 此 处 先 不 做 讨论 ， 大 家 有 兴趣 可 以 去 
了 解 ， 其 实 是 解决 屏幕 适 配 更 好 的 备 选 方案 ,但 是 目前 兼容 性 不 是 太 
好 ) 。 


所 以 在 REM 方 案 中 ， 我 们 如 果 给 HTML 根 元 素 一 个 根据 屏幕 自动 
调整 的 font-size， 页 面 上 所 有 元 素 的 尺寸 全 部 以 rem 为 单位 ， 无 论 屏幕 
宽度 怎样 变化 ， 页 面 的 内 容 和 屏幕 的 比例 将 始终 是 不 变 的 ， 这 样 就 可 
以 实现 页 面 内 容 根据 屏幕 来 自动 缩放 了 。 


这 里 定义 1rem 大 小 的 方案 有 很 多 ， 而 且 计 算得 到 的 1rem 对 应 的 像 
素 宽 度 结果 也 都 不 一 样 ， 例 如 有 人 这 样 来 计算 。 


lrem= 屏 幕 宽度 米 屏 幕 分 辨 率 /10 


上 述 方法 得 到 的 1lrem 恰 好 是 屏幕 宽度 的 10%， 所 有 的 尺寸 布局 都 
相当 于 完全 使 用 百分比 来 布局 ， 就 样 可 以 适应 几乎 所 有 的 屏幕 。 


或 者 我 们 通常 以 某 个 屏幕 宽度 的 设计 稿 为 基准 (例如 320 像 素 宽 
度 ) 进行 缩放 。 


lrem= 屏 幕 宽 度 /320*10 


这 样 1rem 在 宽度 为 320px 的 屏幕 上 表示 的 是 10px， 按 照 这 个 基准 ， 
lrem 在 其 他 屏幕 上 页 面 的 显示 比例 和 在 320px 宽 度 的 屏幕 上 显示 比例 将 
是 一 致 的 。 


在 上 面 的 例子 中 ， 如 果 <html> 标 签 元 素 的 font-size 为 10px， 此 时 将 
页 面 第 一 个 容器 块 的 宽度 设置 为 width: 16rem， 那 么 在 屏幕 宽度 为 414 
px 的 浏览 器 上 ，<html> 元 素 的 font-size 设 置 为 414/320*10px， 容 器 块 的 
宽度 将 自动 填充 为 屏幕 宽度 的 一 半 。 同 样 ， 页 面 文字 的 设置 也 可 以 完 
全 使 用 rem 为 单位 来 实现 屏幕 适 配 。 这 里 rem 通 常 也 是 通过 JavaScript 的 
计算 得 出 的 。 除 此 之 外 ， 我 们 也 可 以 像 下 面 这 样 通过 Media Query 直 接 


对 常见 的 几 种 屏幕 宽度 的 <html> 元 素 标签 来 进行 设置 ， 避 免 使 用 
JavaScript 来 计算 。 


@mixin queryWidth( $min , $max ){ 
@if $min == -1{ 
@media screen and ( max-width: $max+px ) { 
htmlf{ 
font-size: ( ($max+1) / 320 ) * 10px; 


} 
} Q@else if $max == -1{ 
@media screen and ( min-width: $min+px ) { 
htmlf{ 


font-size: ( $min / 320 ) * 10px; 


} 
} Qelsef 
@media screen and ( min-width: $min+px ) and ( max- 
width: $max+px ) 区 
htmlf{ 


font-size: ( $min / 320 ) * 10px; 


} 
@include queryWidth(-1,319); 
@include queryWwidth(320,359); 


@include queryWidth(360,374); 
@include querywWidth(375,383); 
@include queryWidth(384,399); 
@include querywidth(400,413); 
@include queryWidth(414,-1); 


通过 SASS 语 法 的 计算 设 定 很 好 地 解决 了 不 同 大 小 屏幕 下 内 容 和 屏 
幕 比例 不 同 的 问题 ， 其 实 怎样 来 计算 lrem 的 大 小 并 没有 最 佳 的 方案 ， 
任何 一 种 方案 都 是 合理 的 ， 具 体 需 要 根据 设计 稿 大 小 和 需求 来 确定 。 
而 且 需 要 注意 的 是 ，REM 方 案 目前 是 移动 端 上 很 成 熟 和 使 用 最 广泛 的 
屏幕 适 配 方案 ， 因 为 相对 于 zoom 属 性 的 设置 ， 更 加 灵活 可 控 ， 可 以 结 
合 不 需要 缩放 的 px 单位 一 起 使 用 ， 所 以 建议 在 移动 端 尽量 都 用 REM 来 
做 屏幕 适 配 布 局 。 


3.7.4 ”行为 层 了 响应 式 


在 页 面 的 响应 式 设 计 中 ， 行为 层 脚 本 也 是 需要 根据 浏览 器 环境 来 
执行 不 同 逻 辑 的 。 在 3.7.2 节 中 我 们 也 提 到 了 一 些 ， 和 结构 层 类 似 ， 行 
为 层 的 响应 式 同 样 分 为 JavaScript 内 容 在 前 端 引 入 和 在 后 端 引 入 这 两 种 
情况 。 对 于 前 一 种 情况 ， 我 们 主要 可 以 通过 设备 浏览 器 环境 判断 来 异 
步 加 载 不 同 的 JavaScript 脚 本 ， 这 里 不 做 过 多 讲解 。 


if(isMobile){ 
require.async(['zepto', './mobileMain'], function($, main)t{ 
main.init(); 
}); 
}elsef{ 


require.async(['jQuery', './main'], function($, main)t{ 
main.init(); 


}); 


当然 如 果 是 在 后 端 直 出 层 泻 染 不 同 脚本 内 容 就 更 简单 了 ， 通 过 设 
备 浏览 器 的 判断 在 输出 模板 中 引入 不 同 的 脚本 资源 路 径 就 可 以 了 。 


{% if isMobile %} 

<script src="path/mobile/main.js"></script> 
{% else %} 

<script src="path/pc/main.js"></script> 


{% endif %} 


这 样 便 有 效 保证 了 桌面 端 浏览 器 和 移动 端 浏览 器 只 加 载 自己 需要 
的 脚本 资源 ， 执 行 对 应 的 有 逻辑， 同时 避免 了 元 余 的 资产 文件 下 载 。 


3.8 “本章 小 结 


这 一 章 中 ， 我 们 围绕 前 端的 三 层 结构 展开 介绍 了 JavaScript、 
HTML 和 和 CSS 标准 的 演进 与 主要 特性 的 变化 ， 以 及 它们 在 现代 开发 中 的 
实际 应 用 。 就 响应 式 网 站 的 设计 与 实现 ， 笔 者 结合 自己 的 实践 经 验 进 
行 了 较 全 面 的 原理 性 剖析 和 总 结 ， 介 绍 了 响应 式 网 站 实践 需要 考虑 到 
的 问题 与 解决 方案 。 掌 握 这 些 将 有 利于 我 们 把 握 住 前 端 技术 的 基础 和 
应 用 方法 ， 这 也 是 前 端 学 习 中 最 核心 的 部 分 。 下 一 章 中 ， 我 们 将 为 大 
家 继续 讲解 前 端 DOM 交 互 框架 设计 的 内 容 ， 主 要 以 前 端 框 架 的 演进 为 


主线 来 讲述 DOM 交 互 模 式 的 变化 ， 同 时 向 大 家 讲解 DOM 交 互 方式 的 设 
计 原 理 和 思路 。 


第 4 章 ”现代 前 端 交互 框架 


Web 前 端 页 面 的 开发 避免 不 了 与 DOM 的 交互 操作 。 自 前 端 技 术 出 
现 后 ， 页 面 的 结构 越 来 越 复杂 ， 用 户 的 操作 交互 越 来 越 多 ， 对 应 的 
DOM 交 互 也 越 来 越 频 繁 。 为 了 提高 开发 效率 ， 我 们 常常 借助 DOM 区 互 
框架 来 简化 页 面 的 开发 工作 。 经 过 Web 前 端 这 些 年 的 发 展 ， 用 于 DOM 
交互 的 框架 越 来 越 多 ， 设 计 思路 也 不 尽 相 同 。 总 结 来 说 ， 前 端 框 以 一 
次 次 变化 ， 从 提升 效率 的 阶段 ， 慢 慢 走 向 改善 性 能 的 阶段 。 这 章 中 我 
们 就 一 起 来 看 看 那些 备 受 关注 的 前 端 框架 ， 了 解 一 下 这 些 前 端 框架 的 
变化 究竟 给 我 们 融 来 了 什么 。 


4.1 直接 DOM 操 作 时 代 


前 端 HTML 结 构 是 浏览 器 中 承载 互联 网 内 容 数 据 的 主要 载体 ， 用 户 
对 数据 的 处 理 和 展示 都 可 以 通过 HTML 来 体现 。 而 对 于 开发 者 来 说 ， 所 
有 数据 内 容 都 可 以 说 是 通过 DOM 结 构 来 组 织 和 展示 的 。 数 据 的 处 理 和 
操作 的 核心 其 实 就 是 DOM 的 处 理 和 操作 ， 即 便 是 今天 ， 所 有 前 端 
JavaScript 框 染 最 终 要 解决 的 仍然 是 如 何 实现 高 效 、 高 性 能 DOM 交 互 操 
作 的 问题 。 


我 们 先 回 到 Web 前 端的 起 始 阶 段 ， 那 时 候 其 实 是 没有 页 面 DOM 交 
互 的 ， 一般 就 是 一 个 静态 黄页 ， 即 把 一 个 静态 的 文本 放 到 一 个 连接 外 
网 的 服务 器 目录 下 ， 供 用 户 通过 浏览 器 来 连接 访问 。 用 户 除 了 点 击 页 


面 跳 转 外 基本 不 能 有 任何 复杂 的 操作 ， 网 页 上 的 内 容 也 不 能 动态 更 
新 ， 只 能 通过 开发 者 修改 静态 文件 来 改变 。 早 期 的 网 站 页 面 作为 一 个 
单纯 向 用 户 传 递 信息 和 共享 数据 的 方式 存在 。 


很 快 ， 使 用 数据 库 技术 便 可 以 将 数据 库 中 的 数据 记录 读 取出 来 并 
展示 给 用 户 ， 此 时 用 户 已 经 可 以 在 页 面 上 进行 一 些 简 单 的 操作 了 ， 例 
如 表单 提交 、 文 件 上 传 等 ， 这 一 阶段 我 们 可 以 称 为 Web 前 端的 早期 
DOM 交 互 时 代 。 在 该 阶段 ， 用 户 仍 以 单 向 订阅 、 获 取 和 接受 网 站 信息 
内 容 为 主 ， 可 以 进行 刷新 式 的 页 面 提交 等 操作 。 当 然 今天 来 看 这 些 技 
术 就 有 点 久远 了 ， 尤 其 在 互联 网 如 此 高 速 发 展 的 前 提 下 就 显得 更 遥 


Jo 


本 书 一 开始 便 向 读者 介绍 了 前 端 扩 术 出 现 的 背景 和 缘由 ， 从 根本 
上 来 说 也 可 以 认为 前 端 技术 的 出 现 是 为 了 将 DOM 的 交互 操作 从 整个 
Web 站 点 开发 中 独立 出 来 ， 进 而 进行 更 加 高 效 的 管理 。 随 着 AJAX 
(Asyncnous JavaScript And XML ， 异 步 JavaScript 和 XML) 技术 的 出 
现 ， 前 端 页 面 上 的 用 户 操作 越 来 越 多 ， 越 来 越 复 杂 ， 以 前 的 很 多 用 户 
请 求 都 可 以 通过 AJAX 无 刷新 的 操作 来 完成 ， 通 常 AJAX 的 流程 为 用 户 
使 用 XMLHttpRequest (或 ActiveX) 创建 HTTP 请 求 来 获取 服务 端的 数 
据 或 一 段 HIML 结 构 内 容 ， 请 求 成 功 后 在 页 面 上 进行 增加 、 修 改 、 删 除 
DOM 元 素 的 操作 。 


要 实现 对 DOM 元 素 的 交互 操作 ， 就 不 得 不 提 到 DOM API, DOM 
API 提 供 了 浏览 器 上 进行 DOM 对 象 树 交 互 操 作 的 一 系列 原生 JavaScript 
方法 ， 例 如 getElementById、 createElement、 createDocumentFragment、 
appendChild 等 。 包 括 HIML5 新 增加 的 DOM API 与 AJAX 的 API 在 内 ， 这 
些 API 可 以 分 成 以 下 几 种 类 型 : 节 和 点 查询 型 、 节 点 创建 型 、 节 点 修改 
型 、 节 点 关系 型 、 节 点 属性 型 和 内 容 加 载 型 。 


表 4-1 列 出 的 是 目前 浏览 器 常见 的 DOM API 方 法 。 使 用 这 些 基本 的 
API 我 们 就 可 以 进行 前 端 页 面 上 几乎 任何 DOM 的 查询 和 网 络 请 求 操 作 
了 ， 早 期 页 面相 对 比较 简单 ， 没 有 太 多 的 操作 内 容 ， 使 用 这 些 原生 的 
API 就 可 以 满足 开发 需要 了 。 例 如 我 们 要 创建 一 个 数字 列表 ， 每 个 列表 
项 都 有 固定 id 和 data-id， 我 们 就 可 以 这 按照 如 下 代码 通过 基础 的 DOM 
API 实 现 。 


表 4-1 常见 DOM API 举 例 


类 
型 方 法 


节 点 |getElementById 、 getElementsByName 、 
查 询 |getElementsByClassName 、 getElementsByIagName 、 
型 上 |querySelector、querySelectorAll 

节操 

创 建 createElement ~、 createDocumentFragment 、 createTextNode 、 
型 cloneNode 


appendChild 、 replaceChild 、 removeChild 、 insertBefore 、 
innerHTML 


节 
修 改 
型 


系 |parentNode、PpreviousSibling、childNodes 


节 
天 
型 


点 
wlinnerHTML 、 attributes 、 getAttribute 、 setAttribute 、 


Le 


getComputedStyle 


内 容 |XMLHttpRequest、ActiveX 


加 载 
型 


<1DOCTYPE html> 
<html lang="en"> 
<head> 


<meta charset="utf-8" /> 


</head> 
<body> 
<div> 
<h2> 创 建 列 表 </h2> 
<ul id="menu"></ul> 
</div> 
<script> 


let menuUl = document.getElementById( 'menu ' ); 
let fragment = document.createDocumentFragment(); 
for (let i = 0; i < 5; i++) { 
let 1i = document.createElement('1i'); 
1i.innerHTML = i; 
1i.id = i; 
1i.setAttribute('data-id', i); 
fragment .appendChild(1i); 
} 
// 一 次 性 将 文档 碎片 内 容 插入 到 DOM 中 
menuUl.appendcChild(fragment); 


</script> 


</body> 
</html> 


注意 的 是 ， 这 里 DOM 的 property 和 attribute 是 有 区 别 的 。 

ee 
HTML 标 签 的 文本 标记 属性 ， 一 般 是 可 见 的 ， 如 自 定义 的 data-id 属 
性 。 再 如 一 个 元 素 可 以 设置 style property 和 style attribute ， 但 是 style 
property 是 DOM 元 素 固 有 的 ， 而 style attribute 则 不 一 定 有 ， 需 要 在 
HTML 结 构 中 设置 指定 。 推 荐 使 用 createDocumentFragment 来 代替 
createElement 创 建 节 点 内 容 ， 因 为 createDocumentFragment 可 以 将 多 

个 文档 内 容 片 段 先 缓存 起 来 ， 最 后 一 次 性 插入 到 DOM 中 ， 而 
createElement 每 次 创建 节点 都 需要 插入 到 DOM 中 ， 所 以 
createDocumentFragment 可 以 减少 DOM 操 作 次 数 ， 提 高 效率 。 


内 容 加 载 型 API 的 实现 方式 代码 如 下 。 


function urlGet(url) { 
let xmlHttp; 


// 创建 xmlHttp 
if (window.XMLHttpRequest) { 
xmlHttp = new XMLHttpRequest(); 
} else if (window.ActiveXObject) { 
xmlHttp = new ActiveXobject("Microsoft .XMLHTTP" ) ; 
} 


// 发 送 xmLHttp 请 求 
xmlHttp.open("GET", url); 


xmlHttp.onreadystatechange = function() { 


if ((xmlHttp.readyState == 4) && (xmlHttp.status == 
200)) I 
alert('success'); 
} else { 
alert('fail'); 
} 
} 


xmlHttp.send(null); 


通过 使 用 这 些 API， 我 们 基本 可 以 完成 前 端 网 页 中 的 任何 操作 。 但 
随 着 网 站 应 用 的 复杂 化 ， 使 用 这 些 原生 的 API 开 发 就 显得 比较 低 效 而 且 
不 易 管 理 。 因 为 想 对 这 套 API 进 行 必 要 的 封装 来 提高 调用 效率 ， 所 以 
jQuery 这 个 典型 的 DOM 交 互 框架 就 应 运 而 生 了 ， 一 起 出 现 的 还 有 
prototype 和 motools， 但 是 后 两 者 一 开始 就 实现 了 类 的 设计 模式 而 且 API 
的 使 用 不 太 方便 ， 因 此 没有 被 广泛 使 用 。jQuery 以 其 简单 友好 的 API 和 
书写 方式 很 快 得 到 了 广大 开发 者 的 认可 和 使 用 。 


移动 端 开 发 类 似 jQuery 的 框架 ， 以 zepto 为 主 ， 可 以 认为 它 是 一 
个 简化 版 的 jQuery， 其 常用 的 API 和 jQuery 完全 相同 。 


那么 ， 我 们 再 来 看 一 下 jQuery 在 那个 时 代 甚 至 现在 到 底 帮 我 们 解决 
了 什么 问题 呢 ? 为 什么 能 够 受到 这 么 多 人 的 青睐 ? 大 概 一 想 ， Ds 
我 们 解决 的 问题 太 多 了 ， 添 加 了 丰富 的 API 方 法 的 封装 和 网 络 操作 ， 这 
些 都 是 浏览 器 本 身 没有 的 ， 极 大 地 提升 了 开发 效率 。 但 仔细 一 想 ， 
jQuery 处 理 的 问题 似乎 又 没有 那么 多 ，jQuery 只 ,是 才 我 们 解决 了 使 用 基 
础 DOM API 进 行 前 端 开 发 遇 到 的 一 些 问题 。 再 回 到 DOM 原 生 API 的 几 
种 类 型 上 ， 可 以 发 现 jQuery 基本 帮 有 我 们 进行 了 上 面 DOM 的 六 类 API 的 封 
装 操作 ， 方 便 了 开发 者 对 这 几 类 API 进 行 调用 。 


表 4-2 所 示 为 jQuery 部 分 常见 的 方法 API， 这 些 封 装 的 API 大 大 简化 
了 我 们 的 代码 开发 步骤 ， 提 高 了 开发 效率 。 原 来 使 用 基础 DOM API 开 
发 的 方式 就 可 以 变 成 jQuery 更 简单 的 方式 来 实现 了 。 


表 4-2 ”常见 jQuery API 举 例 


类 型 方 法 


VIA 一 一 


于 $(selector)、find() 等 


Ws $(selector)、clone() 等 

1 
html (J)、replace()、remove()、append()、before()、after() 等 
en siblings()、closest()、next()、children() 等 


节点 属性 lattr() 、 data0 、 css() 、 hide() 、 show() 、 slideDown() 、 
型 slideUp()、animate() 等 


内 容 加 载 ajax()、 get()、postO 等 


<IDOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8" /> 
</head> 
<body> 
<div> 
<h2> 创 建 列 表 </h2> 
<ul id="menu"></ul> 
</div> 
<script src="./jQuery.js"></script> 
<script> 
let htmlArr = [1]; 
for (let i = 0; i < 5; i++) { 
htmlArr.push( <11 id="${i}" data-id="${i}">${i}</1i>. ); 
} 
$('#menu' ).append(htmlArr.join("')); 
</script> 
</body> 
</html> 


相对 来 说 ， 开 发 的 代码 简洁 了 很 多 ， 对 于 网 络 加 载 型 API 而 言 ， 也 
可 以 使 用 非常 便捷 的 方式 实现 ， 读 者 可 以 和 基础 API 实 现 的 方式 进行 对 
比 。 


function urlGet(url) { 


$.ajax(({ 
url: url, 
type: 'get', 


success(){ 


alert('success'); 


}, 
error(){ 
alert('fail'); 
} 
}); 
里 然 经 过 了 几 个 大 版 本 的 迭代 ， 目 前 jQuery 被 使 用 最 为 广泛 的 版 本 


仍然 是 1.x 版 本 。 目 前 为 止 jQuery 提供 的 API 已 经 很 完善 了 ，jQuery 1.x 
版 本 帮 我 们 解决 了 许多 问题 。 


o 简化 选择 器 。 可 以 使 用 $ (外 d.class-a0、find0 这 种 简短 的 形式 
进行 组 合 查询 ， 帮 助 我 们 快速 找到 所 有 满足 条 件 的 DOM 元 
素 ， 并 自动 在 原型 链 上 为 返回 的 对 象 添 加 常用 的 操作 方法 。 
相 比 之 下 ， 原 生 的 方法 实现 组 合 查询 就 比较 复杂 了 。 


o DOM 操 作 方 法 。 扩 展 实 现 了 如 html0、appendO0、removeO、 
hide()、animate() 等 多 种 类 型 的 DOM 操 作 方 法 ， 让 DOM 的 交互 
和 修改 更 加 简单 。 


o AJAX。 实 现 了 对 XMLHttpRequest 和 ActiveX 的 统一 封装 ， 使 
AJAX 网 络 请 求 的 调用 更 加 方便 。 


AJAX 跨 域 请 求 时 默认 不 会 带 有 浏览 器 端 Cookie 信 息 ， 需 要 在 请 
求 头 部 加 上 xhrFields: {withCredentials: true} 才 能 将 Cookie 信 息 正 常 带 
到 请 求 中 发 送 给 服务 器 。 


o 事件 绑 定 统一 处 理 。 除 了 DOM API 的 封装 ，jQuery 也 对 DOM 
的 部 分 功能 做 了 封装 ， 主 要 添加 了 on 等 方法 来 统一 处 理事 
件 ， 包 括 事件 绪 定 和 事件 代理 等 。 


// BOM API 实现 事件 绑 定 
addEvent(element, type, fn) { 
// 兼容 性 判断 
if (element .addEVventListener ) { 
element.addEventListener(type, fn, false); 
} else if (element.attachEvent) { 
// 通常 IE 上 回调 函数 的 this 不 指向 当前 element， 所 以 绑 定 时 使 用 
fn.call(element ) 来 
// 绑 定 元 素 
elLement .attachEvent( 'on' + type, function() { 
fn.call(element); 
}); 
} else { 


element['on' + type] = fn; 


// jQuery 事件 绑 定 
$(element).on(type, fn); 


o ” 延 时 对 象 。 较 新 的 jQuery 版 本 添加 了 $.Deferred 对 象 来 处 理 异步 
回调 酌 套 的 问题 。 $.Deferred 的 实现 借鉴 了 异步 处 理 的 
Promise/A 规 范 ， 但 并 没有 完全 遵循 Promise/A 规 范 。 一 般 执 行 
resolve 时 ，$.Deferred 对 象 会 一 次 性 执行 done 中 全 部 的 方法 。 


let $defer = $.Deferred(); 


$defer.done(function() { 
console.1log('A'); 
}).done(function() { 
console.1og('B' ); 
}).done(function() { 
console.1log('C'); 
}).done(function() { 
console.1og('D' ); 
}); 


$defer .resolve( ); 


我 们 再 来 看 一 个 异步 的 例子 ， 理 解 一 下 $.Deferred 是 怎样 控制 多 个 
异步 水 数 执行 的 。 


const fni = function() { 


// 声明 $defer 来 控制 执行 流程 ， 但 不 调用 $defer 时 将 不 会 继续 执行 返回 。 这 
样 我 们 就 可 以 用 来 封装 


// AJAX 等 方法 以 保证 请 求 的 有 序 性 了 

let $defer = $.Deferred() 

setTimeout(function() { 
console.log('A'); 
$defer.resolve( ); 

}, 3000); 


return $defer; 


const fn2 = function() { 
let $defer = $.Deferred(); 
setTimeout(function() { 
console.1log('B'); 
$defer.resolve( ); 
}, 2000); 


return $defer,; 


const fn3 = function() { 
let $defer = $.Deferred(); 
setTimeout(function() { 
console.log('cC'); 
$defer.resolve( ); 
}, 1000); 


return $defer; 


const fn4 = function() { 
setTimeout(function() { 
console.1lo0g('D'); 


}, 0); 


fn1i().then(fn2).then(fn3).then(fn4); 


o 兼容 性 实现 。 例 如 jQuery 实现 on 事件 绑 定 和 Ajax 封装 时 充分 考 
虑 了 不 同 浏览 器 的 差异 性 ， 并 做 统一 处 理 ， 做 到 兼容 性 问题 
对 开发 者 的 透明 。 


总 结 而 言 ，jQuery 主 要 实现 了 选择 器 、DOM 操 作 方法 、 事 件 绑 定 
封装 、AJAX、 Deferred 这 五 个 方面 的 封装 和 常见 的 兼容 性 问题 的 处 
理 。 除 此 之 外 ， 我 们 还 可 以 基于 jQuery 扩展 更 多 的 方法 功能 来 提高 业务 
开发 效率 ， 例 如 Cookie 和 localStorage 操 作 的 封装 、 上 传 文件 、 二 维 码 
自动 生成 等 都 可 以 基于 jQuery 的 大 框架 扩展 实现 。 


如 果 你 因为 项 目的 历史 原因 还 在 使 用 jQuery， 那 么 我 想 要 给 些 建 
议 。 想 要 高 效 地 使 用 jQuery， 可 以 参考 以 下 的 优化 建议 和 原则 : 
(1) 尽 可 能 使 用 id 选 择 器 进行 DOM 查 询 操作 ， 不 要 使 用 组 合 选择 
器 ; (2) 缓存 一 切 需 要 复 用 的 jQuery DOM 对 象 ， 使 用 find0 子 查 
询 ; (3) 不 要 滥用 jQuery， 尽 量 使 用 原生 的 代码 代替 ; (4) 尽 可 能 
使 用 jQuery 的 静态 方法 ;，(5) 使 用 事件 代理 ， 不 要 直接 使 用 元 素 的 
事件 绑 定 ; (6) 尽量 使 用 较 新 的 jQuery 版 本 ; (7) 尽 可 能 使 用 链 式 
写法 来 提高 编程 效率 和 代码 运行 效率 。 


为 什么 要 提 到 上 述 几 点 ， 是 因为 很 多 人 仍然 不 注意 jQuery 的 高 效 
编程 原则 ， 容 易 犯 常见 错误 ， 包 括 一 些 国内 一 线 企业 里 面 工作 时 间 
很 长 的 开发 者 仍 在 犯 这 些 错误 ， 这 样 做 虽然 不 会 影响 业务 的 功能 
发 ， 但 是 做 完 并 做 好 一 件 事情 应 该 成 为 我 们 的 另 一 个 目标 。 希 望 你 
身上 没 出 现 过 这 些 问题 。 


图 4-1 是 目前 前 端 主流 DOM 交 互 式 页 面 加 载 的 基本 流程 ， 浏 览 器 开 
始 加 载 页 面 HTML ， 页 面 HIML 加 载 完成 后 请 求 页 面 脚 本 加 载 ， 脚 本 加 
载 完 成 再 执行 数据 请 求 ， 最 后 进行 数据 泻 染 DOM 操 作 和 事件 绑 定 。 


JavaScript 等 脚本 执行 DOM 操 作 进 行 


审 件 绑 定 
脚本 加 载 发 送 请 求 数据 泻 染 Os 


图 4-1 主流 前 端 页 面 加 载 模式 


随 着 AJAX 技 术 的 盛行 ，SPA (Single Page Application ， 单 页 面 应 
用 ) 应 用 开始 被 广泛 认可 。SPA 的 思路 是 将 整个 应 用 的 内 容 都 在 一 个 页 
面 中 实现 并 完全 通过 异步 交互 来 根据 用 户 操 作 加 载 不 同 的 内 容 。 这 
样 ， 使 用 jQuery 直接 进行 DOM 交 互 的 开发 方式 就 显得 不 易 管理 。 例 如 
当 SPA 页 面 上 的 交互 和 异步 加 载 的 内 容 很 多 时 ， 按 照 之 前 的 思路 ， 我 们 
需要 在 每 一 次 数据 请 求 后 进行 数据 泻 染 和 事件 绑 定 ， 用 户 操作 后 进行 
另 一 部 分 内 容 的 请 求 和 事件 绑 定 ， 后 面 以 此 类 推 。 当 所 有 异步 页 面 全 
部 调用 完成 ， 页 面 上 的 绑 定 将 变 得 十 分 混乱 ， 各 种 元 素 绑 定 ， 泻 染 后 
的 视图 内 容 也 不 清晰 ， 同 时 需要 声明 不 同 变量 保存 每 次 异步 加 载 时 返 
回 的 数据 对 象 ， 因 为 页 面 交 互 需 要 保留 这 些 数 据 进行 操作 ， 最 终 的 项 
目 代 码 可 能 会 乱 成 一 锅 粥 。 


在 这 种 情况 下 ， 我 们 就 很 需要 一 个 能 自动 管理 页 面 上 这 些 DOM 交 
互 操 作 的 机 制 ， 这 时 或 许 就 可 以 考虑 一 下 使 用 MV 六 的 交互 模式 了 。 


4.2 MV* 交 互 模式 


4.2.1 ”前 端 MVC 模 式 


上 节 中 我 们 讲 到 ， 通 过 DOM 交 互 框架 已 经 可 以 比较 高 效 地 处 理 
DOM 操 作 和 事件 绑 定 等 问题 了 。 这 种 高 效 的 方式 带 来 了 效率 上 的 提 
升 ， 但 随 着 页 面 结构 和 交互 复杂 性 的 提升 ， 仪 靠 这 种 方式 会 增加 维护 
管理 的 难度 。 随 着 AJAX 技 术 的 盛行 ，SPA 应 用 开始 被 广泛 使 用 。 上 一 
节 最 后 也 提 到 ， 用 这 种 直接 的 方式 进行 SPA 的 开发 和 维护 是 比较 麻烦 
的 。 为 了 解决 这 个 问题 ， 通 常 将 页 面 上 与 DOM 相 关 的 内 容 抽 象 成 数据 
模型 、 视 图 、 事 件 控制 函数 三 部 分 ， 这 就 有 了 前 端 MVC (Model-View- 
Controller) 的 设计 思路 。 


MVC 可 以 认为 是 一 种 开发 设计 模式 ， 其 基本 思路 是 将 DOM 交 互 的 
内 容 分 为 数据 模型 、 视 图 和 事件 控制 函数 三 个 部 分 ， 并 对 它们 进行 统 
一 管理 。Model 用 来 存放 请 求 的 数据 结果 和 数据 对 象 ，View 用 于 页 面 
DOM 的 更 新 与 修改 ，Controller 则 用 于 根据 前 端 路 由 条 件 (例如 不 同 的 
HASH 路 由 ) 来 调用 不 同 Model 给 View 泻 染 不 同 的 数据 内 容 。 常 用 页 面 
路 由 的 实现 也 很 简单 ， 代 码 如 下 ， 其 主要 思路 是 让 URL 地 址 内 容 匹 配 
对 应 的 字符 串 然后 进行 相应 的 操作 。 


const router = { 


get(match, fn){ 


let url = location.href, 

routeReg = new RegExp(match, 'g'); 
if(routeReg.test(url))t{ 

fn( ); 
} 


return this; 


router.get('#index', function()t{ 

_loadIndex(); // 注册 hash 含有 #index 的 路 由 执行 对 应 的 操作 
}).get('#detail', function(){ 

_loadDetail(); // 注册 hash 含有 #detail 的 路 由 执行 对 应 的 操作 
}); 


另外 我 们 也 可 以 使 用 HIML5 的 pushState 来 实现 路 由 。 
history.pushState (state, title, url) 方法 可 以 改变 当前 页 面 的 ur 而 不 发 生 
跳 转 ， 并 将 不 同 的 state 数 据 和 对 应 的 url 对 应 起 来 。 如 果 页 面 显示 的 内 
容 是 根据 不 同 的 数据 状态 来 自动 完成 的 ， 这 样 根据 state 的 内 容 来 加 载 不 
同 的 组 件 就 很 有 用 了 。 


history.pushSstate({page: 'A'}, 'page A', 'a.htm]l'); 
console.log(history.state); // {page: 'A'} 对 象 


history.pushSstate({page: 'B'}, 'page B', 'b.html'); 
console.1log(history.state); // {page: 'B'} 对 象 


history,pushState({page: 'C'}, page C', 'c.html'); 
console.1log(history.state); // {page: 'C'} 对 象 


这 里 访问 不 同 的 URL 地 址 a.html、b.html、c.html， 页 面 并 不 会 发 生 
跳 转 刷新 ， 而 是 改变 了 当前 的 history.state 内 容 ， 我 们 使 用 history.state 数 
据 的 改变 来 动态 改变 页 面 DOM 的 内 容 这 种 方式 来 实现 SPA 就 很 方便 
Ts 


使 用 路 由 后 ， 如 果 将 SPA 中 的 每 个 路 由 或 用 户 操 作 加 载 的 页 面 内 容 
都 看 成 是 一 个 组 件 ， 那 么 之 前 的 做 法 是 每 个 组 件 独立 完成 各 自 的 数据 
请 求 操 作 、 泻 染 和 数据 绑 定 ， 一 旦 组 件 多 了 ， 每 个 组 件 自 行 处 理 就 会 
造成 逻辑 混乱 。 到 了 MVC 里 面 ， 所 有 的 组 件数 据 请 求 、 泻 染 、 页 面 远 
辑 操作 都 分 别 使 用 Model、View、 Controller 来 注册 调用 。 通 俗 地 讲 ， 就 
像 是 组 件 交 出 了 自己 的 控制 权 给 统一 的 控制 对 象 来 调用 一 样 。 


如 图 4-2 所 示 ， 前 端 应 用 页 面 加 载 完成 后 ， 根 据 不 同 的 用 户 操作 ， 
页 面 会 执行 不 同 的 响应 。 例 如 用 户 操作 或 URL 哈 希 改变 时 会 去 调用 与 
之 对 应 的 ControllerA 方 法 ，ControllerA 方 法 会 请 求 获取 对 应 的 数据 
ModelA，ModelA 很 可 能 是 前 端 AJAX 请 求 返回 的 一 个 接口 数据 ， 然 后 
将 ModelA 传 递 给 视图 模板 ViewA 并 将 最 终 内 容 泻 染 到 浏览 器 中 ， 这 样 
就 完成 了 用 户 的 一 次 交互 操作 ， 用 户 下 一 次 操作 的 过 程 也 是 一 样 的 。 
同时 如 果 用 户 的 操作 需要 进行 DOM 结 构 修 改 ， 那 么 会 传 入 到 Controller 
中 ， 通 过 Controller 获 取 数 据 并 控制 View 的 更 新 。 对 其 中 的 一 个 组 件 A 
的 实现 操作 代码 如 下 。 


<div id="A" onclick="Controller.A.event.change"></div> 


let Controller = {}, Model = {}, View= {}; 


View['A'] = function(data){ 
let tpl = '<input id="input" type="text" value=" 
{{text}}"><span id="showText"> 


{{text}}</span>'; 


// 调用 模板 泻 染 数据 获取 HTML 片段 
let html = render(tpl, data); 


document .getElementById('A').innerHTML = html; 
}; 


Model['A'] = { 
本 一 


text: 'ViewA 泻 染 完 成 ， 


}; 


Controller['A'] = function()t{ 


View['A'|](model['A' |); 


// 用 户 操 作 一 般 通 过 改变 Hash 完成 ， 并 触发 Controller 来 改变 Model 
和 View 
$('window').on('hashchange', function()t{ 
model['A'].text = location.hash; 
View['A'](model['A']); 
}); 


// 点 击 事件 可 以 直接 触发 Controller 改变 Model 并 重新 泻 染 View 


self.event['change'] = function(){ 
model['A'] .text = ' 新 的 ViewA 泻 染 完成 ' ; 


View['A'](model['A']); 


}; 
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图 4-2 MVC 模 式 组 件 结构 示意 图 


为 了 方便 大 家 理解 ， 这 里 采用 了 一 个 最 直接 的 实现 方式 ， 而 且 没 
有 对 A、B、C 组 件 进行 单独 管理 ， 而 是 将 它 的 调用 内 容 分 成 
Controller、Model、View 并 放 在 一 起 统一 管理 ， 相 互 之 间 的 调用 是 直接 
进行 的 。 成 熟 的 MVC 框 架 一 般 是 通过 事件 监听 或 观察 者 模式 来 实现 
的 ， 这 里 只 是 为 了 让 读者 们 更 好 地 理解 MVC 的 原理 。 当 然 这 样 的 组 件 
如 果 多 了 也 比较 混乱 。 所 以 通过 改进 可 以 将 页 面 分 成 不 同 的 小 模块 来 
处 理 ， 同 时 考虑 到 代码 复 用 性 ， 因 此 可 以 使 用 继承 的 方式 来 定义 这 三 
个 组 件 ， 继 续 以 A 组 件 为 例 ， 我 们 一 般 看 到 的 主流 MVC 框 架 的 组 件 定 
义 代码 如 下 。 


<div id="A" onclick="A.event.change"></div> 


// 可 能 有 一 个 公用 的 Component 基 类 


let component = new Component(); 


let A = component.extend({ 
$el: document.getElementById('A'), 
model: { 
text: 'ViewA 泻 染 完成 ' 


}, 


view(data)t{ 
let tpl = "<input id="input" type="text" 
{{text}}"><span 


id="showText">{{text}}</span>'; 


// 调用 模板 泻 染 数据 获取 HTML 片段 
let html = render(tpl, data); 


this.$el.innerHTML = html; 
}, 


controller (){ 


let self = this; 


1 


// 调用 model 数据 传 入 view 中 泻 染 内 容 


self.view(self.model); 


> 


value=" 


// 用 户 操作 一 般 通过 Hash 来 触发 Controller 改变 Model 和 View 
$('window').on('hashchange', function(){ 
self.model.text = location.hash; 


self.view(self.model); 


}); 


// 点 击 事件 可 以 直接 触发 Model 改变 并 重新 泻 染 View 

self.event['change'] = function(){ 
self.model.text = ' 新 的 ViewA 泻 染 完 成 ' ; 
self.view(self.model); 


}; 


}); 


尽管 这 里 写法 不 太一 样 ， 但 实现 的 功能 和 上 面 一 段 代码 是 相同 
的 。 当 Model 或 View 复 杂 后 ， 我 们 也 可 以 考虑 将 Model、YView、 
Controller 拆 分 成 不 同文 件 导 入 引用 。 这 段 代 码 就 是 MVC 基 础 原型 的 设 
计 和 实现 ， 需 要 注意 的 是 ， 用 户 操作 引起 的 DOM 修 改 操 作 主 要 是 通过 
Controller 来 直接 控制 的 ， 但 是 Controller 只 进行 修改 操作 指令 的 分 发 ， 
数据 的 泻 染 一 般 是 在 View 层 来 完成 。 


4.2.2 ”前 端 MVP 模 式 


MVP (Model-View-Presenter) 可 以 跟 MVC 对 照 起 来 看 。 和 MVC 一 
样 ，M 就 是 Model，V 就 是 View， 而 P 代 表 Presenter， 它 与 Controller 有 点 
相似 ， 但 不 同 的 是 ， 用 户 在 进行 DOM 修 改 操 作 时 将 通过 View 上 的 行为 
触发 ， 然 后 将 修改 通知 给 Presenter 来 完成 后 面 的 Model 修 改 和 其 他 View 


的 更 新 ， 而 MVC 模 式 下 ， 用 户 的 操作 是 直接 通过 Controller 来 控制 的 。 
Presenter 和 View 的 操作 绑 定 通常 是 双向 的 ，View 的 改变 一 般 会 触发 
Presenter 的 动作 ，Presenter 的 动作 也 会 改变 View。 


图 4-3 为 MVP 的 执行 流程 ，Model 和 View 是 不 直接 发 生 关 系 的 ， 所 
有 的 逻辑 调用 数据 Model 和 泻 染 视 图 View 模 板 都 在 Presenter 里 面 完成 ， 
同时 用 户 在 View 层 操作 的 改变 会 反馈 到 Presenter 然 后 改变 Model 并 泻 染 
新 的 View。 因 此 ， 上 一 段 代 码 通过 MVP 模 式 的 实现 如 下 。 


ViewA ViewB 了 ViewC 


双向 绑 定 


获取 数据 Model 


Eee 
ee ES Model 
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图 4-3 ”MVP 模式 组 件 结构 示意 图 


<div id="A" onclick="A.event.change"></div> 
// 可 能 有 一 个 公用 的 Component 基 类 


let component = new Component(); 


let A = component.extend({ 
$el: document.getElementById('A'), 
model: { 


text: 'ViewA 泻 染 完成 ' 


}, 


view: '<input id="input" type="text" value="{{text}}"><span 


id="showText">{{text}}</span>", 


presenter()t{ 


let self = this; 


// 调用 模板 泻 染 数据 获取 HTML 片段 
let html = render(self.view, self.model); 


self.S$el.innerHTML = htmil; 


// View 上 的 改变 将 通知 Presenter 改变 Model 和 其 他 的 View 
$('#input').on('change', function(){ 
self.model.text = this.value; 
html = render('{{text}}', self.model); 
$('#showText').html(html); 


}); 


// Controller 上 的 操作 处 理 和 MVC 的 方式 类 似 

self.event['change'] = function(){ 
self.model.text = ' 新 的 ViewA 泻 染 完 成 ' ; 
html = render('{{text}}', self.model); 
$('#showText').html(html); 


}); 


可 以 看 出 ， 这 时 View 和 Model 主 要 用 于 提供 视图 模板 和 数据 而 不 做 
任何 逻辑 处 理 ， 这 是 有 好 处 的 ， 因 为 我 们 现在 只 要 关注 Presenter 上 面 的 
逻辑 操作 就 可 以 了 ， 它 的 职责 很 清晰 ，Presenter 作 为 中 间 部 分 连接 
Model 和 View 的 通信 交互 完成 所 有 的 逻辑 操作 ， 但 这 样 Presenter 层 的 内 
容 就 可 能 变 得 很 重 了 。 另 外 用 户 在 View 上 的 操作 会 反馈 到 Presenter 中 进 
行 Model 修 改 ， 并 更 新 其 他 对 应 部 分 的 View 内 容 。 


4.2.3 ”前 端 MVVM 模 式 


MVVM 则 可 以 认为 是 一 个 自动 化 的 MVP 框 架 ， 并 且 使 用 
ViewModel 代 人 替 了 Presenter ， 即 数据 Model 的 调用 和 模板 内 容 的 泻 染 不 
需要 我 们 主动 操作 ， 而 是 ViewModel 自 动 来 触发 完成 ， 任 何 用 户 的 操作 
也 都 是 通过 ViewModel 的 改变 来 驱动 的 。 


如 图 4-4 所 示 ， 用 户 进 行 操 作 时 ，ViewModel 会 捕获 数据 变化 ， 直 
接 将 变化 反映 到 View 层 上 。ViewModel 的 数据 操作 最 终 在 页 面 上 以 
Directive 的 形式 体现 ， 通 过 对 Directive 的 识别 来 演 染 数据 或 绑 定 事件 ， 
管理 起 来 更 清晰 。 那 么 什么 是 Directive 呢 ? 


自动 双向 绑 定 


获取 数据 Model 


Presenter = Model 
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PresenterA PresenterB ‘.. | PresenterC ModelA ModelB ModelC 


图 4-4 MVP 模 式 组件 结构 示意 图 


MVVM 设 计 的 一 个 很 大 的 好 处 是 将 MVP 中 Presenter 的 工作 拆 分 成 
多 个 小 的 指令 步骤 ， 然 后 绑 定 到 相对 应 的 元 素 中 ， 根 据 相 对 应 的 数据 
变化 来 驱动 触发 ， 自 动 管理 交互 操作 ， 同 时 也 免 去 了 碍 看 Presenter 中 事 
件 列 表 的 工作 ， 而 且 一 般 ViewModel 初 始 化 时 会 自动 进行 数据 绑 定 ， 并 
将 页 面 中 所 有 的 同类 操作 复 用 ， 大 大 节省 了 我 们 目 己 进行 内 容 泻 染 和 
事件 绑 定 的 代码 量 。 用 MVVM 模 式 实现 上 面 的 例子 代码 如 下 。 


<div id="A" q-on="click: change"> 
<input type="text" q-value="text"><span 9q-html="text"> 
</span> 


</div> 


let viewModel = new VM({ 
$el: document.getElementById('A'), 
data:{ 
text : 'ViewA 泻 染 完成 ' 


}, 


method:{ 
change( ){ 
this.text = ' 新 的 ViewA 泻 染 完成 ' ; 


}); 


整体 上 简洁 了 很 多 ， 模 板 数据 的 泻 染 和 数据 绑 定 可 以 通过 q-html 或 
q-click 等 特殊 的 属性 来 控制 完成 ， 这 些 特殊 的 元 素 标签 属性 就 是 我 们 所 
说 的 Directive， 当 然 不 同 的 MVVM 框 架 使 用 的 Directive 前 缀 不 一 样 ， 但 
作用 是 类 似 的 。 我 们 再 来 看 一 个 更 复杂 的 例子 。 


<form action="#" id="form"> 
<label for="text" q-html="l]abel"></label> 
<input type="text" q-value="value" q-model="value" 9q- 
mydo="number | getValue"> 
<button q-on="click: submit"></button> 


</form> 


let viewModel = new VM({ 
$el: document.getElementById('form'), 
data:{ 
label:; ' 用 户 名 '， 
value: ' 输 入 初始 值 '， 
number: 0 
}, 
method:{ 
submit(){ 


// doSubmit 


}, 
directive:{ 
mydo(value)t{ 


console.1log(value); 


} 
}, 
filter:{ 
getValue(){ 
return ++ value; 
} 
} 


}); 


在 这 段 代 码 中 ，ViewModel 初 始 化 时 自动 进行 了 数据 填充 、 数 据 双 
向 绑 定 和 事件 绑 定 。 我 们 再 来 看 一 下 执行 new VM 0 时 进行 ViewModel 
初始 化 所 完成 的 事情 。 


如 图 4-5 所 示 ， 首 先 JavaScript 会 找到 document.getElementById 
(form') 这 个 元 素 并 开始 扫描 元 素 节点 ， 对 这 个 元 素 的 属性 节点 
attributes 和 所 有 子 节点 中 的 attributes 进 行 遍历 ， 一 旦 遍历 到 名 称 中 含有 
q- 开 头 的 属性 时 ， 就 认为 是 MVVM 框 架 自 定义 的 Directive， 此 时 会 执行 
相对 应 的 操作 。 例 如 遍历 到 q-html="label" 时 ， 就 将 ViewModel 初 始 化 时 
默认 数据 对 象 data 中 的 label 值 赋 给 这 个 元 素 的 innerHTML ; 遍历 到 gq- 
on="click: submit" 时 ， 就 在 这 个 元 素 上 绑 定 click 事 件 ， 事 件 函 数 名 为 
submit; 也 可 以 自 定义 q-mydo 的 指令 ， 人 遍历 到 该 节点 属性 时 ， 调 用 


Directive 中 的 mydo 方 法 ， 输 入 参数 为 data 中 getValue 方 法 的 返回 值 ， 这 
里 getValue 0 将 输入 的 number 值 自动 加 1 并 返回 ，getValue 函 数 则 一 般 被 
称 为 过 滤器 。 用 户 在 View 层 操作 时 会 自动 改变 ViewModel 的 数据 ， 然 后 
ViewModel 会 检测 数据 变化 ， 重 新 遍历 扫描 节点 属性 ， 执 行 对 应 的 
Directive， 演 染 HTML 视 图 或 做 事件 绑 定 。 
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图 4-5 MVVM 初 始 化 解析 过 程 


这 里 要 知道 的 是 ，q- 开 头 的 标签 属性 被 称 为 指令 ， 这 是 框架 约定 
的 ， 不 同 的 框架 约定 的 通常 不 一 样 ， 例 如 ng-、v-、ms-， 相 信 大 家 也 见 
过 甚至 用 过 。 这 里 ViewModel 创 建 并 进行 视图 泻 染 和 事件 绑 定 的 过 程 非 
单 简单 ， 按 照 这 个 思路 去 扩充 ， 我 们 就 可 以 目 己 实现 一 个 简单 的 


MVVM 框 架 了 。 当然 完 整 的 框架 涉及 的 东西 远 比 这 要 多 ， 如 含有 丰富 
的 directive、filter、 表 达 式 、ViewModel 中 完善 的 API， 甚 至 包含 一 些 浏 
览 器 兼容 性 处 理 等 。 


directive、filter 具 体 是 什么 呢 ? 我 们 结合 MVVM 框 架设 计 的 相关 内 
容 来 具体 了 解 一 下 。 


O 


© 


Directive。 翻 译 为 指令 ， 简 单 地 说 就 是 自 定义 的 执行 冰 数 ， 例 
如 gq-html、g-class、g-on、g-show、q-attr 等 封装 了 DOM 的 一 些 
基本 可 复 用 性 的 操作 函数 API。 


Filter。 也 岂 过 滤器 ， 如 bool、upperCase、lowerCase 等 ， 指 用 
户 希 望 对 传 入 的 初始 数据 进行 处 理 ， 然 后 再 将 这 个 处 理 的 结 
果 交 给 Directive 或 下 一 个 Filter。 例 如 ，ViewModel 初 始 化 时 传 
入 的 是 一 个 时 间 戳 ， 而 我 们 希望 在 页 面 上 显示 格式 化 后 的 时 
间 ， 那 么 就 可 以 用 gq-html="time | formartTime" 这 样 的 方式 来 使 
用 ， 其 中 formatTime 则 是 将 时 间 戳 tme 转 化 为 时 间 格 式 的 Filter 
国 数 。 


表达 式 设计 。 如 放 ..else 等 ， 类 似 前 端 普 通 的 页 面 模板 表达 式 ， 
其 作用 也 是 控制 页 面 内 容 按照 具体 条 件 来 显示 。 


ViewModel 设 计 。 是 实现 传 入 的 Model 数 据 在 内 存 中 存放 的 环 
节 ， 通 常 ViewModel 也 会 提供 一 些 基 本 的 操作 API， 方 便 开 发 
者 对 数据 进行 读 取 或 修改 。 


数据 变更 检测 。 我 们 上 面 讲 到 了 MVVM 通 常 是 通过 数据 改变 来 
驱动 的 ， 这 样 就 需要 进行 数据 的 双向 绑 定 。 一 般若 要 根据 
View 层 的 变化 来 改变 Model， 是 通过 一 些 特殊 元 素 (例如 


<input>、<select>、<textarea> 等 元 素 ) 的 onchange 事 件 来 触发 
修改 JavaScript 中 ViewModel 对 象 数据 的 内 容 来 实现 的 ， 这 点 比 
较 容 易 理 解 。 另 一 方面 是 ViewModel 修 改 ， 如 何 触发 View 的 自 
动 更 新 或 重 泻 染 呢 。 这 种 根据 数据 的 变化 来 自动 触发 其 他 操 
作 的 机 制 就 是 我 们 说 的 数据 变更 检测 ， 实 现 数据 变更 检测 的 
方法 主要 有 手动 触发 绑 定 、 脏 数据 检测 、 对 象 动 持 、Proxy 
等 。 下 面 就 来 具体 讲解 ViewModel 数 据 变 更 检测 的 实现 方案 。 


4.2.4 ”数据 变更 检测 示例 


之 所 以 将 数据 变更 检测 单独 作为 一 节 来 讲解 是 因为 其 实现 方式 较 
多 ， 而 且 数 据 变更 检测 除了 MVVM 框 架设 计 的 场景 ， 前 端 很 多 其 他 地 
方 也 都 可 以 用 到 。JavaScript 发 展 到 ECMAScript 6+， 形 成 了 更 多 的 方式 
来 实现 数据 对 象 的 变更 检测 ， 下 面 以 目前 四 种 可 行 的 方法 为 例 一 一 为 
大 家 介绍 。 


手动 触发 绑 定 


手动 触发 指令 绑 定 是 比较 直接 的 实现 方式 ， 主 要 思路 是 通过 在 数 
据 对 象 上 定义 get() 方 法 和 set() 方 法 (当然 也 可 以 使 用 其 他 命名 方法 ) ， 
调用 时 手动 触发 get() 或 set() 冰 数 来 获取 、 修 改 数据 ， 改 变数 据 后 会 主动 
触发 get() 和 set() 遂 数 中 View 层 的 重新 泻 染 功 能 。 前 面 提 到 了 ， 根 据 视 图 
View 来 驱动 ViewModel 变 化 的 场景 主要 应 用 于 <input>、 <select>、 
<textarea> 等 元 素 中 ， 当 用 户 输 入 内 容 变 化 时 ， 通 过 监听 DOM 的 
change、 select、keyup 等 事件 来 触发 操作 改变 ViewModel 的 数据 。 我 们 
来 看 一 个 简单 的 数据 双向 绑 定 的 例子 。 


<1DOCTYPE html> 
<html lang="en"> 
<head> 

<meta charset="UTF-8"> 

<title>data-binding-method-set</title> 
</head> 
<body> 
<input q-value="value" type="text" id="input"> 
<span q-text="value" id="el"></span> 
<script> 

let elems = [document .getElementById('el'), 

document .getElementById('input')]; 

let data = { 


value: 'hello' 


}; 


// 定义 Directive 
let directive = { 
text: function(text){ 
this.innerHTML = text; 
}, 
value: function(value)t{ 


this.setAttribute('value', value); 


}; 


// 数据 绑 定 监 听 


if(document.addEventListener){ 
elems[1].addEventListener('keyup', function(e) { 
ViewModelSet('value', e.target.value); 
}, false); 
}elsef{ 
elems[1].attachEvent('onkeyup', function(e) { 
ViewModelSet('value', e.target.value); 


}, false); 


// 开始 扫描 节点 
Scan( ); 
// 设置 页 面 2 秒 后 自动 改变 数据 更 新 视图 
setTimeout(function(){ 
ViewModelSet('value', 'hello ouvenzhang ' ) ; 


}, 1000) 


function scan() { 
// 扫描 带 指 令 的 节 点 属性 
for(let elem of elems){ 
elem.directive = [1]; 
for(let attr of elem.attributes) { 
if (attr.nodeName.indexOof('gq-') >= 0) { 
// 调用 属性 指令 
directive[attr.nodeName.slice(2)].call(elem, 
data[attr.nodevalue]); 


elem.directive.push(attr.nodeName.slice(2)); 


// 设置 数据 改变 后 扫描 节点 
function ViewModelSet(key, value)t{ 
data[key] = value; 
Scan( ); 
} 
</script> 
</body> 
<html> 


通过 浏览 器 加 载 执 行 这 个 页 面 结 构 ，ViewModel 的 变化 会 自动 改变 
输入 框 的 内 容 ， 同 样 ， 输 入 内 容 的 变化 也 会 驱动 ViewModel 数 据 的 变 
化 。 我 们 通过 ViewModelSet() 方 法 改变 ViewModel 的 数据 后 ， 需 要 主动 
调用 scan 0 方法 重新 扫描 HTML 页 面 上 的 节点 ， 并 在 需要 的 地 方 重新 泻 
染 HTML 结 构 。 


脏 检测 机 制 


以 典型 的 MVVM 框 架 Angularjs 为 例 ，Angularjs 是 通过 检查 脏 数据 
来 进行 View 层 操作 更 新 的 ， 但 我 们 并 不 针对 某 个 框架 来 分 析 脏 数据 检 
测 的 机 制 ， 因 为 成 熟 框架 的 实现 考虑 了 很 多 全 面 的 东西 ， 比 较 复杂 ， 
我 们 需要 的 是 通过 简洁 明了 的 代码 演示 脏 数据 检测 的 实现 原理 。 脏 检 
测 的 基本 原理 是 在 ViewModel 对 象 的 某 个 属性 值 发 生变 化 时 找到 与 这 个 


属性 值 相关 的 所 有 元 素 ， 然 后 再 比较 数据 变化 ， 如 果 变 化 则 进行 
Directive 指 令 调 用 ， 对 这 个 元 素 进行 重新 扫描 渲染 。 用 这 种 方法 实现 上 
面 的 例子 ， 代 码 如 下 。 


<1DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>data-binding-drity-check</title> 
</head> 
<body> 
<input qg-event="value" gqg-bind="value" type="text" 
id="input"> 
<span qg-event="text" qg-bind="value" id="el"></span> 
<script> 
let elems = [document .getElementById('el'), 
document .getElementById('input')]; 
let data = { 
value: 'hello' 
}; 
// 定义 Directive 
let directive = { 
text: function(str) { 
this.innerHTML = str; 
}, 
value: function(str) { 


this.setAttribute('value', str); 


}; 


// 初始 化 扫描 节点 
scan(elems); 


$digest('value'); 


/x* 
* 输入 框 数 据 绑 定 监听 
*/ 
if(document.addEventListener)t{ 
elems[1].addEventListener('keyup', function(e) { 
data.value = e.target.value; 
$digest(e.target.getAttribute('qg-bind')); 
}, false); 
}elsef{ 
elems[1].attachEvent('onkeyup', function(e) { 
data.value = e.target.value; 
$digest(e.target.getAttribute('qg-bind')); 
}, false); 


setTimeout(function() { 
data.value = 'hello ouvenzhang'; 
// 执行 $digest 方法 来 启动 脏 检测 
$digest('value' ); 

}, 2000) 


function scan(elems) { 
// 扫描 带 指令 的 节点 属性 
for(let elem of elems)t{ 


elem.directive = []; 


// 可 以 理解 为 数据 支持 监听 
function $digest(value)t{ 


let list = document.querySelectorAll('[9qg-bind='+ value 
和 


digest(1ist); 


// 脏 数据 循环 检测 
function digest(elems) { 


// 扫描 这 指 令 的 节点 属性 


for (let i = 0, len = elems.length; i < len; I++) { 


let elem = elems[i]; 


for (let j = 0, leni = elem.attributes.length; j < 
len1; j++) { 


let attr = elem.attributes[j]; 


if (attr.nodeName 


.indexof('qg-event') >= 0) { 
// 调用 属性 指令 


let datakey = 


elem.getAttribute('qg-bind') 
|| undefined; 


// 进行 脏 数据 检测 ， 如 果 数 据 改变 ， 则 重新 执行 指令 ， 否 
则 跳 过 
If(elem.directive[attr.nodevalue] '== 
data[ldatakey])t{ 
directive[lattr.nodeVvaluel].call(elem, 
data[datakey | ) ; 
elem.directive[attr.nodeValue] = 


data[dataKey] ; 


} 
} 
} 
} 
} 
</script> 
</body> 
</html> 


其 实 这 里 的 和 手动 绑 定 扫描 节 点 的 方式 类 似 ， 不 同 的 是 ， 脏 检测 
只 针对 可 能 修改 的 元 素 进行 扫描 ， 这 样 就 提高 了 ViewModel 内 容 变 化 后 
扫描 视图 泻 染 的 效率 。 


前 端 数据 对 象 劫持 (Hijacking) 


数据 劫持 是 目前 使 用 比较 广泛 的 方式 。 其 基本 思路 是 使 用 
Object.defineProperty 和 Object.defineProperies 对 ViewModel 数 据 对 象 进行 
属性 get0 和 setO 的 监听 ， 当 有 数据 读 取 和 赋值 操作 时 则 扫描 元 素 节 点 ， 


运行 指定 对 应 节点 的 Directive 指 令 ， 这 样 ViewModel 使 用 通用 的 等 号 赋 
值 就 可 以 了 。 具 体例 子 如 下 。 


<IDOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>data-binding-hijacking</title> 
</head> 
<body> 
<input q-value="value" type="text" id="input"> 
<div q-text="value" id="el"></div> 
<script> 
let elems = [document .getElementById('el'), 
document .getElementById('input"')]; 
let data = { 
value: 'hello' 
}; 
// 定义 Directive 
let directive = { 
text: function(text) { 
this.innerHTML = text; 
}, 
value: function(value) { 


this.setAttribute('value', value); 


let bValue 


Scan( ); 


// 可 以 理解 为 数据 劫持 监听 
defineGetAndSet(data, 'value'); 


// 数据 绑 定 监听 
if(document.addEventListener){ 
elems[1].addEventListener('keyup', function(e) { 
data.value = e.target.value; 
}, false); 
}elsef{ 
elems[1].attachEvent('onkeyup', function(e) { 
data.value = e.target.value; 


}, false); 


setTimeout(function() { 
data.value = 'hello ouvenzhang ' ; 


}, 2000); 


function scan() { 
// 扫描 带 指 令 的 节 点 属性 
for(let elem of elems){ 
elem.directive = [1]; 


for(let attr of elem.attributes) { 


if (attr.nodeName.indexof( 'dq-') >= 0) { 
// 调用 属性 指令 
directive[attr.nodeName.slice(2)].call(elem, 
data[attr.nodevalue]); 


elem.directive.push(attr.nodeName.slice(2)); 


// 定义 对 象 属性 设置 劫持 
function defineGetAndSet(obj, propName) { 
Object.defineProperty(obj, propName, { 
get: function() { 
return bValue,; 
}, 
set: function(newValue) { 
bValue = newValue; 
Scan( ); 
}, 
enumerable: true, 


configurable: true 


}); 
} 
</script> 
</body> 
</html> 


需要 注意 的 是 ，defineProperty 只 支持 Internet Explorer 8 以 上 和 
Chrome 等 标准 的 浏览 器 ， 且 Internet Explorer 8 浏览 器 中 需要 使 用 es5- 
shim 来 提供 支持 。 Firefox 浏 览 器 不 支持 该 方法 ， 需 要 使 用 
defineGetter 和 defineSetter 来 代替 ， 这 里 为 了 让 大 家 理解 其 中 的 
原理 ， 所 以 直接 使 用 了 defineProperty 来 实现 。 


ECMAScript 6 Proxy 


在 前 面 章节 中 ， 我 们 讲解 ECMAScript 6 时 向 大 家 介绍 了 Proxy 特 
性 ， 它 可 以 用 于 在 已 有 的 对 象 基 础 上 重新 定义 一 个 对 象 ， 并 重新 定义 
对 象 原型 上 的 方法 ， 包 括 getO0 方 法 和 set(0 方 法 ， 同 时 我 们 也 将 它 和 
defineProperty 进 行 了 比较 。 下面 来 看 一 下 使 用 Proxy 如 何 进行 数据 的 变 
更 检测 。 


<1DOCTYPE html> 

<html lang="en"> 

<head> 
<meta charset="UTF-8"> 
<title>data-binding-proxy</title> 


</head> 


<body> 
<input q-value="value" type="text" id="input"> 
<div q-text="value" id="el"></div> 


<script> 


'UsSe Strict ' ， 


let elems = [document .getElementById('el'), 
document .getElementById('input"')]; 
// 定义 Directive 
let directive = { 
text: function(text) { 
this.innerHTML = text; 
}, 
value: function(value) { 


this.setAttribute('value', value); 


}; 


// 设置 data 的 访问 Proxy 
let data = new Proxy({}, { 
get: function (target, key, receiver) { 
return target.value; 
}, 
set: function (target, key, value, receiver) { 
target.value = value; 
Scan( ); 


return target.value; 


}); 


data['value'] = 'hello'; 
scan( ); 


ye 


* 数据 绑 定 监听 
4 
if(document.addEventListener){ 
elems[1].addEventListener('keyup', function(e) { 
data.value = e.target.value; 
}, false); 
}elsef 
elems[1].attachEvent('keyup', function(e) { 
data.value = e.target.value; 


}, false); 


setTimeout(function() { 
data.value = 'hello ouvenzhang ' ; 


}, 2000); 


function scan() { 
// 扫描 带 指 令 的 节 点 属性 
for(let elem of elems)t{ 
elem.directive = [1]; 
for(let attr of elem.attributes) { 
if (attr.nodeName.indexOof('gq-') >= 0) { 
// 调用 属性 指令 
directive[lattr.nodeName.slice(2)].call(elem, 
data[attr.nodevalue]); 


elem.directive.push(attr.nodeName.slice(2)); 


} 

</script> 
</body> 
</html> 


这 里 通过 简单 的 代码 体现 了 MVVM 双 向 数据 绑 定 的 基本 原理 ， 希 
望 读者 们 认真 阅读 并 理解 。 关 于 MVVM 的 数据 变更 检测 介绍 的 比较 
多 ， 因 为 可 以 认为 这 是 MVVM 设 计 实 现 的 最 关键 部 分 ， 如 果 处 理 得 好 
会 大 大 提升 MVVM 框 架 的 效率 ， 否 则 会 有 较 多 重复 的 元 素 扫描 过 程 而 
拖累 代码 执行 速度 。 到 这 里 相信 大 家 也 对 MVVM 的 设计 原理 有 了 较 深 
的 了 解 ， 上 自己 也 可 以 实现 一 个 类 似 的 框架 。 


总 结 来 看 ， 前 端 框架 从 直接 DOM 操 作 到 MVC 设 计 模 式 ， 然 后 到 
MVP， 表 到 MVVM 框 架 ， 前 端 设计 模式 的 改进 原则 一 直 向 着 高 效 、 易 
实现 、 易 维护 、 易 扩展 的 基本 方向 发 展 。 虽 然 目前 前 端 各 类 框架 也 已 
经 成 熟 并 开始 向 高 版 本 迭代 ， 但 是 还 没有 结束 ， 我 们 现在 的 编程 对 象 
依然 没有 脱离 DOM 编 程 的 基本 套路 ， 一 次 次 框架 的 改进 大 大 提高 了 开 
发 效率 ， 但 是 DOM 元 素 运 行 的 效率 仍然 没有 变 。 要 解决 这 个 问题 ， 就 
必须 了 解 下 一 节 中 介绍 的 前 端 Virtual DOM。 


4.3 Virtual DOM 交 互 模式 


4.3.1 Virtual DOM 设 计 理 念 


MVVM 的 前 端 交 互 模式 大 大 提高 了 编程 效率 ， 自 动 双 向 数据 绑 定 
让 我 们 可 以 将 页 面 逻辑 实现 的 核心 转移 到 数据 层 的 修改 操作 上 ， 而 不 
再 是 在 页 面 中 直接 操作 DOM。 但 实际 上 ， 通 过 上 一 节 的 内 容 可 以 看 
出 ， 尽 管 MVVM 改 变 了 前 端 开 发 的 逻辑 方式 ， 但 是 最 终 数据 层 反 应 到 
页 面 上 View 层 的 泻 染 和 改变 仍 是 通过 对 应 的 指令 进行 DOM 操 作 来 完成 
的 ， 而 且 通 常 一 次 ViewModel 的 变化 可 能 会 触发 页 面 上 多 个 指令 操作 
DOM 的 变化 ， 带 来 大 量 的 页 面 结构 层 DOM 操 作 或 泻 染 。 先 来 看 下 面 这 
个 应 用 场景 。 


<ul id="root"> 
<1li q-repeat="1list"> 
<span q-text="value"></span> 
<Span> 固 定 文本 </span> 
</1i> 
</ul> 
let viewModel = new VM({ 
$el: document.getElementById('root'), 
data:{ 
list: [{value: 1}, {value: 2}, {value: 3}] 


}); 


使 用 MVVM 框 架 时 就 生成 了 一 个 数字 列表 ， 此 时 如 果 需 要 显示 的 
A a 0}, {value: 1}, {value: 2}, {value: 3}] ， 在 MVVM 框 
架 中 一 般 会 重新 泻 染 整个 列表 ， 包 括 列 表 中 无 须 改变 的 部 分 也 会 重新 
泻 染 一 次 。 但 实际 上 如 果 直 接 操作 改变 DOM 的 话 ， 只 需要 在 <ul> 子 元 
素 前 插入 一 个 新 的 <li> 元 素 就 可 以 了 。 但 在 一 般 的 MVVM 框 架 中 ， 我 


们 通常 不 会 这 样 做 。 羔 无 疑问 ， 这 种 情况 MVVM 的 View 层 更 新 模式 
就 消耗 了 更 多 疫 必 要 的 性 能 。 


那么 该 如 何 对 ViewModel 进 行 改进 ， 让 浏览 器 知道 实际 上 只 是 增加 
了 一 个 元 素 呢 ? 通过 对 比 [{fvalue: 1} ，{value: 2}，f{value: 3}] 和 [{value: 
0} , {value: 1} , {value: 2}, {value:3}] ， 我 们 发 现 其 实 只 是 增加 了 一 个 
{value: 0}， 那 么 该 怎样 将 这 个 增加 的 数据 反映 到 View 层 上 呢 ? 我 们 可 
以 这 样 想 ， 将 新 的 Model data 和 旧 的 Model data 进 行 对 比 ， 然 后 记录 
ViewModel 的 改变 方式 和 位 置 ， 就 知道 了 这 次 View 层 应 该 怎样 去 更 新 ， 
这 样 比 直接 重新 泻 染 整个 列表 高 效 得 多 。 


这 里 其 实 可 以 理解 为 ，ViewModel 里 的 数据 就 是 描述 页 面 View 内 容 
的 另 一 种 数据 结构 标识 ， 不 过 需要 结合 特定 的 MVVM 描 述 语 法 编译 来 
生成 完整 的 DOM 结 构 。 试 想 一 下 ， 如 果 ViewModel 里 的 数据 和 MVVM 
的 语法 结构 放 在 一 起 用 另 一 种 对 象 表示 ， 代 码 可 能 如 下 。 


let ulElement = { 
tagName: 'ul', 
attributes: [{ 

id: "root' 

}], 
children: [ 

{tagName: "1i', children: [{ 
tagName: 'span', 
nodeText: 1 

},4 
tagName: 'span', 


nodeText : ' 固 定 文本 ' 


}]}, 
{tagName: ']1i 
tagName : 
nodeText: 
},4 
tagName : 
nodeText 
}]}, 
{tagName: 
tagName : 
nodeText: 
},4 
tagName : 


nodeText: 


}]} 


}; 


多 | 


', children: 


'span', 


2 


'span', 


: ' 固 定 文本 ' 


; Children: 
'span', 


3 


'span', 


' 国 定 文本 : 


[{ 


[{ 


如 图 4-6， 如 果 用 JavaScript 对 象 的 属性 层级 结构 来 描述 上 面 HTML 
DOM 对 象 树 的 结构 ， 就 可 以 这 样 来 表示 。 当 数据 改变 时 ， 新 生成 一 份 
改变 后 的 ulElement， 并 与 原来 的 ulElemnet 结 构 进 行 对 比 ， 可 以 看 出 ， 
上 面 的 操作 只 需要 在 ulElement 对 象 children 属 性 的 最 前 面 增加 以 下 内 容 


印 吕 。 

{tagName: '1i', children: [{ 
tagName: 'span', 
nodeText: 0 


},1 


tagName: "Span '， 


nodeText : ' 固 定 文本 ' 
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图 4-6 ”节点 变化 对 比 


这 样 我 们 就 找到 了 进行 这 次 视图 改变 的 最 小 操作 描述 的 对 象 ， 根 
据 这 个 差异 性 描述 的 对 象 ， 可 以 很 容易 地 创建 出 变更 的 DOM 结 构 ， 完 
成 这 次 HTML DOM 结 构 的 修改 ， 而 不 是 直接 对 整个 列表 重新 泻 染 。 这 
样 我 们 也 不 用 再 去 读 取 MVVM 的 语法 结构 了 ， 否 则 仍 需 扫 摘 DOM 节 点 
的 所 有 属性 ， 进 行 较 多 的 DOM 操 作 ， 而 浏览 器 中 DOM 对 象 的 默认 属性 
是 很 多 的 ， 这 样 ViewModel 初 始 化 泻 染 的 过 程 便 会 很 慢 。 


这 里 的 ulElement 对 象 可 以 理解 为 Virtual DOM。 通常 认为 ，Virtual 
DOM 是 一 个 能 够 直接 描述 一 段 HTML DOM 结 构 的 JavaScript 对 象 ， 浏 
览 器 可 以 根据 它 的 结构 按照 一 定 规 则 创建 出 确定 唯一 的 HTML DOM 结 
构 。 整 体 来 看 ，Virtual DOM 的 交互 模式 减少 了 MVVM 或 其 他 框架 中 对 
DOM 的 扫描 或 操作 次 数 ， 并 且 在 数据 发 生 改 变 后 只 在 合适 的 地 方 根据 
JavaScript 对 象 来 进行 最 小 化 的 页 面 DOM 操 作 ， 避 免 大 量 重新 泻 染 。 


4.3.2 “Virtual DOM 的 核心 实现 


先 总 结 一 下 使 用 Virtual DOM 模 式 来 控制 页 面 DOM 结 构 更 新 的 过 
程 : 创建 原始 页 面 或 组 件 的 Virtual DOM 结 构 ， 用 户 操 作 后 需要 进行 
DOM 更 新 时 ， 生 成 用 户 操作 后 页 面 或 组 件 的 Virtual DOM 结 构 并 与 之 前 
的 结构 进行 对 比 ， 找 到 最 小 变化 virtual DOM 的 差异 化 描述 对 象 ， 最 后 
把 差异 化 的 virtual DOM 根 据 特定 的 规则 泻 染 到 页 面 上 。 所 以 核心 操作 
可 以 抽象 成 三 个 步骤 : 创建 Virtual DOM; 对 比 两 个 Virtual DOM 生 成 差 
异化 Virtual DOM; 将 差异 化 Virtual DOM 泻 染 到 页 面 上 。 下 面 逐 一 了 解 
这 三 个 步骤 的 具体 操作 。 


创建 Virtual DOM 


创建 virtual DOM 即 把 一 段 HTML 字 符 串 文本 解析 成 一 个 能 够 描述 
它 的 JavaScript 对 象 。 我 们 很 自然 地 想 ， 通 过 浏览 器 提供 的 DOM API 扫 
首 这 段 DOM 的 节点 ， 遍 历 它 的 属性 ， 然 后 添加 到 JavaScript 对 象 上 去 即 
吕 。 


<U] id="root"> 
<]1i> 
<span>1</span> 
<Span> 固 定 文本 </span> 
</1i> 
<]1i> 
<span>2</span> 


<Span> 固 定 文本 </span> 


</1i> 
<]1i> 
<span>3</span> 
<Span> 固 定 文本 </span> 
</1i> 


</ul> 


例如 上 面 这 段 HTML 片 段 ， 遍 历 完成 后 生成 如 下 结构 。 


let ulElement = { 
tagName: 'ul', 
attribute: [{ 

id: root， 

}], 
children: [ 

{tagName: "1i', children: [{ 
tagName: 'span', 
nodeText: 1 

},4 
tagName: 'span', 
nodeText: ' 固 定 文 本 ' 

}]}, 

{tagName: "1i', children: [{ 
tagName: 'span', 
nodeText: 2 

},4 
tagName: 'span', 


nodeText : ' 固 定 文本 ' 


}]}, 

{tagName: '1i', children: [{ 
tagName: 'span', 
nodeText: 3 

},4 
tagName: 'span', 
nodeText: ' 固 定 文本 ' 

1 


}; 


这 似乎 很 合理 ， 但 其 实 这 样 是 错 的 。 这 样 创建 Virtual DOM 会 直接 
失去 Virtual DOM 的 优势 ， 它 是 为 了 避免 直接 进行 DOM 操 作 而 设计 的 。 
我 们 不 能 通过 浏览 器 DOM API 扫 描 去 生成 JavaScript 对 象 ， 因 为 扫描 过 
程 本 身 使 用 到 DOM 的 读 取 操作 ， 这 个 过 程 很 慢 。 一 种 可 选 的 方式 是 ， 
直接 书写 类 似 ulElement 的 JavaScript 结 构 表 示 Virtual DOM， 但 这 样 又 会 
导致 层次 不 清晰 ， 当 节点 过 多 时 ，JavaScript 对 象 就 会 很 大 ， 难 以 阅读 
和 开发 管理 。 相 比 之 下 我 们 仍然 习惯 使 用 HTML 标 记 来 书写 最 终 浏览 
页 面 的 结构 ， 所 以 一 种 更 可 选 的 方法 是 ， 自 己 实 现 上 述 这 段 HTML 字 符 
串 文 本 的 解析 方式 ， 根 据 标签 之 间 的 关系 ， 读 取 生 成 Virtual DOM 的 结 
构 。 例 如 提供 某 个 常见 Virtual DOM 的 方法 createVDOM。 


let htmlString = ‘<ul id="root" class="11st"> 
<]1i> 
<span>1</span> 
<Span> 固 定 文本 </span> 
</1i> 


<1i> 


<span>2</span> 
<Span> 固 定 文本 </span> 
</1i> 
<]1i> 
<span>3</span> 
<Span> 固 定 文本 </span> 
</1i> 


</Uul>;. 


let ulEmement = createVDOM(htmlString); 


那么 createVDOM 就 可 以 如 下 实现 : 逐个 分 析 字 符 串 中 的 字符 ， 根 
据 词 法 分 析 内 容 ， 将 标签 名 字 存 为 lagName， 属 性 存 入 attributes， 子 标 
签 内 容 存 入 children。 通 过 这 种 方式 ， 我 们 可 以 将 一 段 H8TML 文 本 字符 
串 解 析 成 一 个 JavaScript 对 象 。 到 目前 为 止 ， 浏 览 器 对 HIML 还 没有 任 
何 处 理 ， 而 是 JavaScript 直 接 分 析 HIML 字符 串 文本 来 生成 Virtual 
DOM， 所 以 这 就 比 DOM API 操 作 要 快 。 创 建 Virtual DOM 人 往往 就 是 将 一 
段 DOM 描 述 字符 串 解 析 成 Virtual DOM 对 象 的 过 程 ， 供 后 面 操作 调用 。 


图 4-7 为 浏览 器 进行 词法 分 析 的 状态 转换 图 。 根 据 HITML 字 符 串 解 
析 创 建 Virutal DOM 的 过 程 相 当 于 实现 了 一 个 HTML 文 本 解析 器 ， 但 是 
没有 生成 DOM 对 象 树 ， 只 是 生成 了 一 个 操作 效率 更 高 的 JavaScript 对 
象 ， 因 此 通常 不 会 直接 将 HTML 交 给 浏览 器 去 解析 ， 因 为 浏览 器 的 
DOM 解 析 很 慢 ， 这 也 是 Virtual DOM 交 互 模式 和 普通 DOM 编 程 最 本 质 
的 区 别 。 完 成 之 后 再 通过 Virtual DOM 进 行 泻 染 生 成 一 个 真实 的 DOM 操 
作 就 比较 简单 了 。 


before attribute value 


attribute value 
attribute name 


before attribute name 


Self-closing 


data 
tag name 


tag open 


end tag open 
markup declaration open 


图 4-7 文法 解析 过 程 HTML 


const render = function (virtualDOM) { 
let element = document.createElement(virtualDOM.tagName); 


let attributes = virtualDOM.attributes; 


// 设置 节点 的 DOM 属性 
for (let key in attributes) { 


element.setAttribute(key, attributes[key]) 


let children = virtualDOM.children || [] 


for(let child of children)t{ 
// 如 果 是 字符 串 则 直接 插入 字符 串 ， 否 则 构建 子 节点 
let childNode = (typeof child === 'string') ? 
document.createTextNode(child) : 
render (child) 
element .appendchild(childNode) 


return elLement ， 


对 比 Virtual DOM 


当 用 户 进行 了 页 面 操 作 需 要 进行 页 面 视图 改变 时 ， 通 常会 生成 一 
个 新 的 Virtual DOM 结 构 来 表示 改变 后 的 状态 ， 而 且 不 会 将 这 个 改变 后 
的 Virtual DOM 内 容 立 即 重新 泻 染 到 页 面 中 ， 而 是 通过 对 比 找 出 两 个 
Virtual DOM 的 差异 性 ， 得 到 一 个 差异 树 对 象 。 对 于 Virtual DOM 的 对 比 
算法 实际 上 是 对 于 多 叉 树 结构 的 遍历 算法 。 对 多 叉 树 遍历 就 有 广度 优 
先 算法 和 深度 优先 算法 ， 我 们 以 深度 优先 算法 为 例 来 看 一 下 Virtual 
DOM 树 的 对 比 过 程 。 


如 图 4-8 所 示 ， 可 以 对 Virtual DOM 中 的 每 个 节点 添加 一 个 唯一 的 字 
母 id， 那 么 两 个 Virtual DOM 的 节点 顺序 分 别 使 用 深度 优先 遍历 算法 表 
示 为 ABEFCGHDIJ 和 AKLMBEFCGHDIJ， 这 样 我 们 很 容易 分 析出 需要 
在 A 和 B 之 间 进 行 插入 操作 KLM 节 点 ， 再 根据 KLM 的 关系 ， 可 以 知道 只 


需要 插入 完整 的 K 节 点 即 可 。 使 用 广度 优先 算法 遍历 的 思路 也 是 类 似 
的 ， 遍 历 出 两 个 Virtual DOM 节点 顺序 为 ABCDEFGHIJ 和 
AKBCDLMEFGHIJ， 不 过 稍微 不 同 的 是 ， 这 种 情况 下 检测 到 有 两 处 插 
入 ， 需 要 进一步 判断 来 合并 操作 ， 优 化 差异 树 的 结构 。 


此 外 在 Virtual DOM 的 对 比 过 程 中 ， 除 了 节点 改变 的 内 容 ， 还 需要 
继续 记录 发 生 差异 化 改变 的 类 型 和 位 置 ， 例 如 是 针对 具体 哪 一 个 元 素 
的 增加 、 替 换 、 删 除 操作 等 。 
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图 4-8 深度 优先 算法 对 比 Virtual DOM 
演 染 差异 化 Virtual DOM 


经 过 Virtual DOM 的 差异 化 对 比 ， 我 们 获取 了 用 户 操作 后 的 差异 化 
Virtual DOM、 差异 化 类 型 和 差异 化 的 位 置 ， 那 么 剩 下 的 操作 就 很 直接 
了 ， 根 据 对 比 返回 的 结果 将 差异 化 内 容 经 过 DOM 操 作 泻 染 到 页 面 上 ， 
整个 交互 的 过 程 便 完 成 了 。 


与 以 前 交互 模式 相 比 ，Virtual DOM 最 本 质 的 区 别 在 于 减少 了 对 
DOM 对 象 的 操作 ， 通 过 JavaScript 对 象 来 代替 DOM 对 象 树 ， 并 且 在 页 面 
结构 改变 时 进行 最 小 代价 的 DOM 泻 染 操 作 ， 提 高 了 交互 的 性 能 和 效 


率 。 这 就 是 Virtual DOM 交 互 模式 的 优势 ， 也 是 提高 前 端 交互 性 能 的 根 
本 原因 。 


资料 : http://w3c.github.io/html/syntax.htmlo 


通过 Virtual DOM 的 实现 分 析 ， 我 们 大 概 了 解 了 它 的 实现 过 程 和 主 
要 优势 。 这 种 直接 解析 和 操作 JavaScript 对 象 的 方式 相对 于 频繁 的 DOM 
操作 速度 更 快 ， 可 以 认为 Virtual DOM 的 设计 是 为 了 提升 页 面 的 泻 染 性 
能 ， 为 前 端 构建 高 性 能 的 web 应 用 提供 了 新 的 实践 方案 ， 在 实践 项 目 中 
非常 值得 尝试 和 推广 。 但 实际 上 ， 我 们 只 是 通过 这 种 方式 减少 了 DOM 
操作 ， 而 没有 完全 脱离 DOM 操 作 。 在 最 后 的 泻 染 阶 段 ，DOM 的 泻 染 操 
作 仍 然 无 法 避免 ， 在 浏览 器 DOM 性 能 更 慢 的 移动 端 Hybrid WebView 
中 ， 如 果 想 完全 脱离 对 DOM 的 操作 来 进一步 提高 性 能 ， 又 该 怎么 做 
呢 ? 


4.4 ”前 端 MNV* 时 代 


尽管 Virtual DOM 的 交互 模式 能 在 页 面 数据 泻 染 和 变更 时 尽 可 能 地 
减少 DOM 操 作 ， 但 仍 无 法 完全 脱离 DOM 交 互 的 模式 。 我 们 知道 DOM 
的 操作 效率 不 高 ， 在 移动 设备 的 Hybrid WebView 上 表现 会 更 慢 ， 所 以 
为 了 进一步 改进 Hybrid 应 用 中 的 DOM 性 能 ， 希 望 完 全 脱离 DOM 编 程 的 
模式 来 进行 结构 层 的 操作 。 


为 什么 可 以 这 样 来 实现 呢 ? 首先 ， 目 前 主流 Hybrid App 的 web 内容 
通常 是 在 原生 应 用 中 做 入 WebView 来 实现 的 ， 而 原生 应 用 的 界面 数据 
泻 染 可 以 通过 调用 原生 控件 来 实现 ， 它 不 仅 没有 HTML DOM 的 性 能 缺 
陷 ， 而 且 还 可 以 直接 调用 Native 系 统 底层 的 API， 其 次 ， 我 们 在 第 2 章 中 
讲 到 ，Hybrid App 可 以 通过 统一 的 JavaScript 交 互 协议 来 调用 原生 的 方 
法 和 控件 。 所 以 使 用 JavaScript 直 接 调用 和 产生 原生 控件 进行 界面 数据 
泻 染 的 方式 是 可 以 实现 的 。 


4.4.1 MNV* 模 式 简介 


我 们 把 这 种 使 用 JavaScript 调 用 原生 控件 或 事件 绑 定 来 生成 应 用 程 
序 的 交互 模式 称 为 前 端 MNV 米 开发 模式 。 可 以 简单 理解 为 Model- 
NativeView- 米 ， 而 后 面 的 米 可 以 表示 Virtual DOM 或 MVVM 中 的 
ViewModel， 我 们 也 可 以 自己 使 用 Controller 来 实现 调用 的 方式 。 这 样 定 
义 是 非常 合适 的 ， 相 比 之 前 的 不 同 无 非 就 是 使 用 NativeView 人 代替 了 


Viewo 


如 果 说 Virtual DOM 减 少 了 DOM 的 交互 次 数 ， 那 么 MNV 米 想 要 做 
的 一 件 事情 就 是 完全 抛弃 使 用 DOM， 而 交互 数据 的 操作 依然 可 以 使 用 
ViewModel、Virtual DOM[ 或 者 直接 的 Model 来 实现 ， 有 具体 就 看 实现 的 方 
式 了 。 值 得 注意 的 是 ， 这 种 模式 目前 仅 适 用 于 移动 端 Hybrid 应 用 ， 因为 
需要 依赖 原生 应 用 控件 的 调用 支持 ， 而 只 有 这 种 特殊 的 应 用 场景 
足 条 件 。 


4.4.2 ”MNV* 模 式 实 现 原理 


我 们 直接 来 看 一 下 MNV 米 模式 的 通用 实现 思路 。 显 示 一 段 文本 内 
容 代码 如 下 。 


<TextView q-text="text"></TextView> 


对 应 的 数据 Model 为 {text: 'hello' }， 解 析 到 Native 端 生成 一 个 文本 
域 的 过 程 就 可 以 这 样 来 描述 。 


如 图 4-9 所 示 ， 以 ViewModel 封 装 实现 生成 NativeView 的 思路 为 例 ， 
我 们 需要 通过 NativeView 来 泻 染 一 段 文 本 ， 需 要 注意 的 是 ， 此 时 开发 的 
前 端 结构 层 规 学 就 不 是 HIML 了 ， 而 是 XML 规范 ， 两 者 解析 过 程 大致 
类 似 。 首 先 ，MNV 米 框架 需要 解析 数据 ViewModel 和 XML 的 指令 


Directive， 我 们 知道 JavaScript 可 以 借助 通用 协议 来 调用 原生 应 用 的 方 
法 ， 然 后 按照 标准 的 JSBridge 协 议 将 Model 和 Directive 封 装 成 协议 串 
jsbridge://DOMRender:success/ createView?{"text": "hello", "element": 


"TextView"} 的 形式 ， 通 过 Prompt (Android 上 的 方法 ，iOS 上 使 用 
iframe) 发 送 到 客户 端 ， 这 里 调用 的 是 解析 DOMRender 的 createView 方 
法 创建 一 个 TextView，TextView 是 Android 原 生 系统 上 的 一 个 内 置 文本 
控件 的 基 类 ， 和 HTML 的 <p> 标 签 类 似 ， 可 以 用 来 创建 移动 端 上 的 一 个 
文本 域 展示 一 段 文 字 。 此 时 客户 端 会 解析 到 这 上段 协议 囊 ， 调 用 原生 应 
用 动态 创建 文本 控件 TextView 的 界面 内 容 碎片 类 似 于 HTML 的 文档 碎 
片 a a i 段 ) ， 这 里 Android 中 TextView 的 控 
件 内 容 描述 通过 XML 规范 就 可 以 如 下 表示 。 


<TextView 
style="@style/text_view style" 
android:layout_ width="fill_ parent" 


android:layout_height="fill parent" 


android:layout_ weight="1" 


android:text="hello" /> 


MNV#* 框 架 


Mode1 数 据 执行 指令 


data: { 《TextView q-text= “text “> 
text: “hello” 《</TextView> 
; 


框架 交互 协议 封装 


执行 success 回 调 
jsbridge://DOMRender: success/createView? 
{ text”:” hello”, “element”: “TextView”} 


协议 解析 支持 库 


EventHandle DOMRender | other Modules 


Nativ 原 起 肌 朴 回 g 潜 大 用 于 创建 界面 i | 处 理事 件 等 


图 4-9 MNV 炒 开发 模式 设计 思 


这 里 也 可 以 传 入 基本 的 样式 为 创建 成 功 的 TextView 添 加 一 些 基础 样 
式 。 同 样 执行 成 功 后 也 能 回调 JavaScript 传 入 的 success() 方 法 来 异步 执行 
JavaScript 的 其 他 操作 。 


整体 上 设计 实现 这 样 一 个 Native 泻 染 机 制 思 路 并 不 难 ， 但 是 要 实现 
好 JavaScript 端 和 Native 端 的 封装 ， 难 度 就 比较 大 了 。MNV 米 框架 端的 
主要 任务 是 解析 Model、ViewModel 或 virtual DOM 组 成 JSBridge 协 议 串 
并 发 送 ， 而 Native 端 的 实现 将 会 比较 复杂 ， 需 要 处 理 不 同 的 标签 元 素 解 


析 ， 例 如 遇 到 <TextView> 标 签 则 创建 TextView 控 件 ， 遇 到 <Layout> 标 签 
创建 Layout 控 件 ， 还 可 能 需要 处 理事 件 的 绑 定 等 ， 即 将 JavaScript 的 事 
件 通过 Native 事 件 来 实现 。 整 体 上 像 是 使 用 移动 端 原生 的 方式 来 解析 
HTML 上 需要 实现 的 应 用 功能 。 


MNV 炒 的 基本 原理 主要 是 将 JSBridge 和 DOM 编 程 的 方式 进行 结 
合 ， 让 前 端 能 够 快速 构建 开发 原生 界面 的 应 用 ， 从 而 脱离 DOM 的 交互 
模式 。 这 一 节 简 要 介绍 了 MNV 炒 的 基本 实现 思路 ， 大 家 也 可 以 根据 兴 
趣 和 业务 场景 来 选择 使 用 目前 主流 的 MNV 阔 开发 框架 进行 尝试 ， 而 且 
目前 MNV 米 开发 模式 也 正 处 于 一 个 推广 应 用 阶段 ， 相 信 示 来 会 更 加 普 
及 。 


4.5 ”本 章 小 结 


在 这 一 章 中 ， 我 们 就 前 端 各 类 框架 进行 了 原理 性 分 析 ， 从 直接 
DOM 编 程 到 MV 炒 交互 模式 ， 再 到 Virtual DOM 编 程 理念 ， 以 及 MNV 沙 
的 泻 染 方式 ， 前 端 框架 一 直 秉 承 着 提高 效率 和 性 能 的 宗旨 一 步 步 变 
化 。 在 学 习 这 章 的 同时 ， 我 们 也 需要 深入 理解 体会 各 类 框架 的 实现 设 
计 方 式 ， 这 样 才能 理解 前 端 框架 的 变化 规律 。 作 为 前 端 工程 师 ， 我 们 
需要 这 种 追根 究 底 的 精神 。 下 一 章 将 开始 分 析 讲 解 大 型 前 端 项 目 中 的 
应 用 实践 技术 ， 让 读者 们 学 习 和 了 解 在 实际 的 项 目 开 发 中 应 该 具备 哪 
些 方面 的 知识 和 能 力 。 


第 5 章 “前端 项 目 与 技术 实践 


现代 前 端 技术 飞速 发 展 ， 最 终 形 成 了 以 效率 和 质量 为 核心 的 两 大 
趋势 。 融 效率 而 言 ， 在 大 型 前 端 项 目的 开发 中 ， 规 范 的 制定 、 框 架 的 
出 现 与 升级 、 构 建 的 使 用 更 新 、 组 件 化 的 设计 实现 等 都 在 于 让 前 端 能 
更 快 、 更 高 效 地 完成 更 多 的 事情 。 质 量 方面 ， 前 端 优化 的 提出 、 前 端 
用 户 数 据 的 收集 、 错 误 日 志 的 收集 上 报 等， 都 是 为 了 帮助 开发 者 来 提 
高 前 端 性 能 ， 提 升 用 尸体 验 。 目 前 ， 前 端 已 经 进入 了 以 效率 和 质量 为 
核心 的 工业 化 时 代 ， 各 类 辅助 工具 和 技术 的 使 用 大 大 减少 了 前 端 开发 
的 重复 工作 量 ， 省 去 了 很 多 低 效 的 操作 。 在 这 一 章 中 ， 我 们 将 以 不 同 
专题 的 形式 一 起 来 看 一 看 前 端的 高 效率 技术 和 质量 提高 手段 是 如 何在 
大 型 项 目 中 实践 运用 的 ， 这 也 是 我 们 作为 一 名 前 端 工程 师 必 须 具备 的 
工程 思维 和 能 力 。 


5.1 前端 开发 规范 


开发 规范 可 以 认为 是 软件 开发 工程 师 之 间 交 流 的 另 一 种 语言 ， 它 
在 一 定 程度 上 决定 了 团队 协作 过 程 中 开发 的 程序 代码 是 否 具 有 一 致 性 
和 易 维护 性 ， 统 一 的 开发 规范 常常 可 以 降低 代码 的 出 错 概率 和 团队 开 
发 的 协作 成 本 。 开 发 规范 制定 的 重要 性 不 言 而 噜 ， 使 用 怎样 的 规范 又 
成 为 了 另 一 个 问题 ， 因 为 编程 规范 并 不 唯一 。 通 俗 地 讲 ， 规 范 的 差别 
很 多 时 候 只 是 代码 写法 的 区 别 ， 不 同 的 规范 都 有 各 自 的 特点 ， 没 有 优 
劣 之 分 ， 在 选择 时 也 没 必 要 纠结 于 使 用 哪 一 种 规范 ， 不 过 既然 规范 是 


是 高 一 个 团队 开发 效率 的 虚拟 工具 ， 那 么 在 一 个 团队 里 还 是 尽 可 能 使 
用 同一 种 开发 规范 比较 好 。 


实际 上 ， 我 们 平时 所 说 的 开发 规范 更 多 时 候 指 的 是 狭义 上 的 编码 
规范 ， 广 义 上 的 开发 规范 包括 实际 项 目 开 发 中 可 能 涉及 的 所 有 规范 ， 
如 项 目 技术 选 型 规范 、 组 件 规范 、 接 口 规范 、 模 块 化 规范 等 。 由 于 每 
个 团队 使 用 的 项 目 技术 实现 不 一 样 ， 项 目 技术 选 型 规范 、 组 件 规范 、 
接口 规范 、 模 块 化 规范 等 也 可 能 千差万别 ， 但 无 论 是 哪 一 种 规范 ， 推 
荐 在 一 个 团队 中 尽 可 能 保持 统一 。 本 节 中 ， 我 们 先 来 讨论 前 端 开发 规 
范 ， 主 要 指 的 是 狭义 上 的 前 端 编 码 规范 。 


我 们 将 从 前 端 通用 规范 、HTML 规 范 、CSS 规 范 、ECMAScript 5 规 
范 、ECMAScript 6 十 规范 和 防御 性 编程 等 几 个 方面 来 向 大 家 介绍 前 端 
所 涉及 的 开发 编码 规范 ， 同 时 也 会 尽量 向 大 家 介绍 这 样 制定 编码 规范 
的 原因 和 好 处 ， 如 果 有 读者 觉得 对 规范 的 使 用 都 比较 了 解 了 ， 建 议 跳 
过 这 一 节 ， 继 续 学 习 下 一 节 内 容 。 对 于 本 节 推 荐 的 规范 ， 大 家 可 以 选 
择 性 借鉴 ， 不 一 定 作 为 唯一 的 标准 学 习 使 用 。 


5.1.1 ”前端 通用 规范 
三 层 结 构 分 离 


前 端 页 面 开发 应 做 到 结构 层 (HTML) 、 表 现 层 (CSS) 、 行 为 层 
(JavaScript) 分 离 ， 保 证 它们 之 间 的 最 小 耦合 ， 这 对 前 期 开发 和 后 期 
维护 都 是 至 关 重 要 的 。 移 动 端 开 发 可 以 适当 地 进行 CSS 样 式 、 图 片 资 
源 、JavaScript 内 联 ， 内 联 的 资源 大 小 标准 一 般 为 2KB 以 内 ， 否 则 可 能 
会 导致 HIML 文 件 过 大 ， 页 面 首 次 加 载 时 间 过 长 。 


<!-- 不 推荐 --> 

<button style="background-color: #ccc;" onclick="javascript: 
console,1og(this);"> 按钮 

</button> 


<!-- 推荐 ， 相关 样式 和 JavaScript 逻辑 写 在 外 部 引入 的 CSS 和 JavaScript 
文件 中 --> 


<link rel="stylesheet" href="./base.css "> 
<button class="btn btn-primary"> 按 钮 </button> 


<script src="./base.js"></script> 


缩 进 


统一 使 用 tab (或 4 个 空格 宽度 ) 来 进行 缩 进 ， 可 以 在 开发 编辑 器 或 
IDE 里 进行 设置 。 虽 然 推 荐 使 用 4 个 空格 来 缩 进 ， 但 其 实 选择 哪 种 编 进 
方式 并 不 重要 ， 重 要 的 是 在 一 个 项 目 中 缩 进 方式 要 保持 一 致 ， 不 要 出 
现 混用 的 情况 ， 否 则 会 造成 阅读 上 的 障碍 。 季 运 的 是 ， 现 在 开发 工具 
的 格式 化 插件 能 帮助 我 们 完成 这 件 事 情 ， 所 以 要 尽量 在 开发 工具 中 设 
置 来 让 工具 自动 完成 这 件 事情 。 


内 容 编码 


在 HTML 文 档 中 用 <meta charset="utf-8 "> 来 指定 编码 ， 以 避免 出 现 
页 面 乱码 问题 。 不 需要 为 CSS 显 式 定 义 编码 ， 其 默认 为 utf-8。 


/* 不 推荐 */ 
Q@charset "utf-8"; 


html, bodyt{ 
margin: 0; 


padding: 0; 


/* 推荐 */ 
html, body{ 
margin: 0; 


padding: 0; 


小 写 


所 有 的 HTML 标 签 、HTML 标 签 属性 、 样 式 名 及 规则 建议 使 用 小 
写 ， 我 们 一 般 习 惯 使 用 小 写 英 文字 符 ， 大 与 单词 相对 不 容易 阅读 和 理 
解 。HTML 属 性 的 id 属 性 可 以 使 用 驼峰 大 小 写 组 合 的 命名 方式 ， 因 为 id 
属性 常常 只 用 于 JavaScript 的 DOM 查 询 引 用 ， 而 JavaScript 语 言 标准 推荐 
使 用 驼峰 大 小 写 组 合 的 命名 方式 ， 因 此 HTML 页 面 上 的 id 属 性 也 尽量 使 
用 这 种 标准 来 写 。 


<!-- 不 推荐 --> 
<UL id="menu_list" class="menu-list"> 
<LI class="menu-list-item"></LI> 


<LI class="menu-list-item"></LI> 


<LI class="menu-list-item"></LI> 


</UL> 


<1-- 推荐 --> 

<ul id="menuList" class="menu-list"> 
<]li class="menu-list-item">1</1i> 
<]1 class="menu-list-item">2</1i> 
<]li class="menu-list-item">3</1i> 


</ul> 


代码 单行 长 度 限制 


代码 单行 长 度 不 要 超过 120 字 符 (或 80 字 符 ， 具 体 可 根据 团队 习惯 
来 决定 ) ， 长 字符 串 拼 接 通常 使 用 加 号 来 连接 换行 的 内 容 。 


注释 


尽 可 能 地 为 代码 写 上 注释 ， 无 论 是 HTIML、CSS 还 是 JavaScript， 必 
要 的 注释 是 不 能 少 的 。 段 内 容 描述 可 以 使 用 段 注 释 ， 单 行内 容 则 使 用 
单行 注释 ， 对 于 独立 的 文件 而 言 ， 也 尽量 在 文件 头 部 添加 文件 注释 。 
当然 ， 更 推荐 使 用 自 文 档 化 风格 的 代码 进行 开发 ， 通 过 代码 的 含义 来 
代替 注释 。 


A 
* filename: util.js 


* author: ouvenzhang 


* description: 提供 常见 的 的 工具 函数 集 ， 主 要 包含 
getDay( ) : 获取 中 文 星期 时 间 格 式 ， 例 如 星期 一 
formatTime(): 获取 格式 化 后 的 中 文 时 间 表 示 , 例如 2016 年 12 月 12 


A 


let util = {}; 


/x** 
* 获取 带 中 文 的 星期 字符 串 
* @param {[timestamp]} timestamp [输入 的 时 间 戳 ] 
* @return {[string]} [返回 中 文 星期 时 间 表 示 ] 
*/ 
function _getDay(timestamp) { 
// 默认 的 星期 表示 字符 串 
const Day = [' 星 期 日 '，' 星 期 一 '，' 星 期 二 '，' 星 期 三 '，' 星 期 四 '， 
' 星 期 五 '，' 星 期 六 ']， 
return Day[timestamp.getDay()]; 


module.exports = { 


getDay: _getDay, 


自 文档 化 开发 是 目前 比较 提倡 的 一 种 书写 带 有 具体 含义 项 目 代 
码 的 编码 方式 ， 它 提出 要 尽 可 能 让 代码 本 身 来 表示 代码 执行 的 功能 
描述 ， 而 减少 文档 注释 的 书写 ， 因 为 文档 注释 需要 更 多 的 时 间 去 维 
护 。 在 下 面 的 例子 中 ， 第 二 种 方式 就 比 第 一 种 方式 更 加 清晰 ， 即 使 
不 使 用 注释 也 能 很 容易 理解 代码 的 的 含义 ， 而 第 一 种 方式 一 定 要 添 
加 注释 说 明 才 能 理解 其 中 的 含义 。 


// 代码 块 一 
if(!'el.offsetWidth && l!el.offsetHeight) {} 


// 代码 块 二 
function isVisible(el) { 
return !el.offsetwWidth && !el.offsetHeight ; 


} 
if(!isVisible(el)) {} 


再 如 : 
// 代码 块 一 


let width = (value - 0.5) * 16; 


// 代码 块 二 


let width = emToPixels(value); 


function emToPixels(ems) { 


return (ems - 0.5) * 16; 


行 尾 空格 与 符号 


删除 行 尾 空 格 与 多 余 的 符号 ， 这 些 内 容 是 没有 必要 存在 的 。 


5.1.2 ”前 站 HTML 规范 
文档 类 型 定义 


统一 使 用 HTML5 的 标准 文档 类 型 <IDOCTYPE html> 来 定义 ， 这 样 
更 简洁 ， 而 且 向 后 兼容 。 不 使 用 HTML 4.01 的 DTD 定 义 。 


<!-- 不 推荐 --> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
"http://www.w3.org/TR/xhtml111/ 

DTD/xhtml11.dtd"> 


<!-- 推荐 --> 
<!IDOCTYPE html> 


head 内 容 


head 中 必须 定义 title、keyword、description， 保 证 基本 的 SEO 页 面 
关键 字 和 内 容 描述 。 移 动 端 页 面 head 要 添加 viewport 控 制 页 面 不 缩放 ， 
有 利于 提高 页 面 泻 染 性 能 。 建 议 在 页 面 <head> 上 加 上 基本 的 社交 RICH 
化 消息 ， 保 证 网 页 地 址 分 享 到 主流 社交 平台 后 显示 页 面 的 缩 略 图 、 标 
题 和 描述 等 。 


<1-- 推荐 --> 

<meta name="viewport" content="width=device-width,minimum- 
scale=1.0,maximum-scale=1.0, 

user-scalable=no"/> 

<meta itemprop="name" content=" 页 面 标题 "> 

<meta name="description" itemprop="description" content=" 页 面 内 容 
描述 。"> 

<meta itemprop="image" 


content="http://www.domain.com/assets/logo.png"> 


省 略 type 属 性 


在 引用 CSS 或 JavaScript 时 ， 可 以 省 略 type 属 性 不 写 ， 因 为 HIML5 
在 引入 CSS 时 默认 type 值 为 text/css， 在 引入 JavaScript 时 默认 type 值 为 


text/Javascripto 


<!-- 不 推荐 --> 
<link type="text/css" rel="stylesheet" href="./base.css"> 


<script type="text/javascript" src="./base.js"></script> 


<!-- 推荐 --> 
<link rel="stylesheet" href="./base.css"> 


<script src="./base.js"></script> 


使 用 双 引 号 包 应 属性 值 


所 有 的 标 等 属性 值 必须 要 用 汉 引 号 包 庄 ， 不 允许 有 的 用 双 5 引 号 有 
的 用 单 引 号 ， 这 样 有 利于 区 分 标签 的 属性 名 和 属性 值 。 


<!-- 不 推荐 --> 


<div class='ui-dialog'></div> 


<1-- 推荐 --> 


<div class="ui-dialog"></div> 


属性 值 省 略 


非 必 需 的 属性 值 可 以 省 略 。 例 如 输入 框 里 的 readonly、 disabled 和 
reduired 等 属性 值 是 非 必需 的 ， 可 以 省 略 不 写 。 


<!-- 不 推荐 --> 
<input type="text" readonly="readonly"> 


<input type="text" disabled="disabled"> 


<1-- 推荐 --> 
<input type="text" readonly> 


<input type="text" disabled> 


芷 套 


所 有 元 素 必须 正确 骨 套 ， 尽 量 使 用 语义 化 标签 ， 不 允许 交叉 ， 也 
不 允许 在 inline 元 素 中 包含 block 元 素 。 


<!-- 不 推荐 --> 

<Span> 
<div> 这 是 一 个 块 级 div 元 素 <p> 
</div> 这 是 一 个 块 级 p 元 素 </p> 

</span> 

<ul> 
<h3>1list</h3> 
<1i>ouven</1i> 
<]1i>zhang</1i> 


</ul> 


<!-- 推荐 --> 
<div> 
<p> 这 是 一 个 块 级 div 元 素 </p> 
<p> 这 是 一 个 块 级 p 元 素 </p> 
</div> 
<div> 
<h3>1list</h3> 
<ul> 
<1i>ouven</1i> 
<1i>zhang</1i> 
</U]> 


</div> 


标签 闭合 


非 自 闭合 标签 必须 添加 关闭 标识 ， 目 闭合 标 等 无 须 关 闭 。 在 W3C 
的 不 同 规范 中 ， 标 签 的 闭合 检查 也 是 不 一 样 的 。XHTML 较 为 严格 ， 必 
须 在 自 闭合 标签 中 添加 “A”， 在 HTML4.01 中 ， 不 推荐 在 自 闭合 标签 中 
添加 “A”。 而 HTML5 则 较为 宽松 ， 添 不 添加 “了 ”都 符合 规范 。 


<!-- 不 推荐 --> 
<link rel="stylesheet" href="./base.css"></1link> 


<p>ouvenzhang... 


<1-- 推荐 --> 
<link rel="stylesheet" href="./base.css"> 


<p>ouvenzhang...</p> 


使 用 img 的 alt 属 性 


为 <img> 元 素 加 上 alt 属 性 ，alt 属 性 的 内 容 可 以 简要 描述 图 片 的 内 
容 ， 有 利于 页 面 搜索 引擎 优化 ， 而 且 对 于 让 人 用 户 和 图 像 加 载 失 败 时 
的 提示 也 很 实用 ， 即 支持 无 障碍 阅读 和 提示 ， 所 以 要 尽量 避免 alt 的 属 
性 值 为 空 。 


<!-- 不 推荐 --> 


<img Src="banner .jpg"> 


<!-- 推荐 --> 
<img src="banner.jpg" alt=" 宣 传 图 片 "> 


使 用 label 的 for 属 性 


为 表单 内 部 元 素 <label> 加 上 for 属 性 或 者 将 对 应 控件 放 在 <label> 标 
签 内 部 ， 这 样 在 点 击 <label> 标 签 的 时 候 ， 同 时 会 关联 到 对 应 的 input 或 
textarea 上 选中 ， 可 以 增加 输入 的 响应 区 域 。 


<!-- 不 推荐 --> 


<label> 赣 色 </label><input type="radio" name="color" value="#00f"> 


<label> 红 色 </label><input type="radio" name="color" value="#f00"> 


<1-- 推荐 --> 

<label for="blue"> 蓝 色 </label><input type="radio" id="blue" 
name="color" value="#00f"> 

<label for="red"> 红 色 </label><input type="radio" id="red" 


name="color" value="#f00"> 


<!-- 或 推荐 --> 
<label><input type="radio" name="color" value="#00f"> 监 色 </label> 


<label><input type="radio" name="color" value="#f00"> 红 色 </label> 


按 模 块 添加 注释 


在 每 个 大 的 模块 的 开始 和 结束 的 地 方 添加 起 始 注释 标记 ， 便 于 开 
发 者 识别 、 维 护 。 


<!-- 新 闻 列 表 模 块 - -> 
<div id="news" class="g-news"></div> 


<!-- 新 闻 列 表 模 块 结 束 --> 


<!- - 排行 榜 模块 - -> 
<div id="topic" class="g-rank"></div> 


<!- - 排行 榜 模 块 结束 - -> 


标签 元 素 格 式 


块 级 元 素 一 般 另 起 一 行 写 。 行 内 元 素 可 以 根据 情况 换行 ， 尽 量 保 
证 行内 元 素 代码 长 度 不 超过 一 行 ， 否 则 要 考虑 另 起 一 行 写 。HTML 的 子 
元 素 要 尽量 相对 其 父 级 进行 缩 进 ， 这 样 更 有 层次 。 


<!-- 不 推荐 --> 
<div><h1>name</h1><p>AAA<em>BBB</em>CCC<span>DDD</Sspan>EEE</p> 


</div> 


<1-- 推荐 --> 

<div> 
<hi>name</h1> 
<p>AAA<em>BBB</em>CCC<span>DDD</span>EEE</p> 


</div> 


语义 化 标签 


竺 合适 的 地 方 选择 语义 合适 的 标签 。 不 要 使 用 被 HTML5 废 弃 用 于 
样式 表现 的 无 语义 化 标签 ， 如 <center>、<font>、<strike> 等 。 


<1- - 不 推荐 移动 端 使 用 废弃 的 标签 - -> 
<section class="m-news g-mod"> 
<header class="m-news-hd"> 
<center> 头 部 区 域 </center> 
</header> 
<div class="m-news-bd"> 
<font size="3" color="red"> 字 体 标签 </font> 
</div> 
<footer class="m-news-ft"> 
<strike> 底 部 区 域 </strike> 
</footer> 


</section> 


<1-- 推荐 移动 端 语义 化 布局 标签 - -> 
<section class="m-news g-mod"> 
<header class="m-news-hd"> 
头 部 区 域 
</header> 
<div class="m-news-bd"> 
模块 正文 
</div> 
<footer class="m-news-ft"> 


底部 区 域 


</footer> 


</section> 


5.1.3 ”前 端 CSS 规 范 
CSS 引 用 规范 


使 用 link 的 方式 调用 外 部 样式 文件 ， 外 部 样式 文件 可 以 复 用 并 能 利 
用 浏览 器 缓存 提高 加 载 速度 。 禁 止 在 标签 元 素 中 使 用 内 联 样式 ， 否 则 
后 期 很 不 容易 管理 ， 强 烈 不 建议 使 用 。 


1-- 推荐 --> 


<link rel="stylesheet" href="main.css"> 


!-- 不 推荐 - -> 
<div style="margin: 10px; padding: 10px;"></div> 


样式 的 命名 约定 


CSS 类 名 命名 一 般 由 单词 、 中 男 线 组 成 ， 当 然 也 有 BEM ( 块 
block、 元 素 element、 修 饰 符 modifier， 是 由 Yandex 团 队 提出 的 一 种 前 端 
命名 方法 ) 方案 ， 这 里 推荐 一 种 规范 一 一 所 有 命名 都 使 用 小 写 ， 加 上 
ui- 等 前 级 ， 表 示 这 个 类 名 只 用 来 控制 元 素 的 样式 展现 。 不 推荐 使 用 拼 
音 作为 样式 名 ， 尤 其 是 使 用 缩写 的 拼音 与 英文 混合 的 方式 ,很 让 人 费 
解 。 


// 不 推荐 
.Xinwen{} 
.XINWEN-1ist{} 
.Xinwen-l1ist{} 
.Ui-xw-ft{} 


.News{} 


尽量 不 以 info、current、news 等 单个 单词 类 名 直接 作为 类 名 称 ， 单 
独 的 一 级 命名 很 容易 造成 冲突 覆盖 ， 并 且 很 难 理解 。 


// 不 推荐 


.News .infof{} 


// 推荐 


.Ui-news .news-info{} 


不 以 模块 表现 样式 来 命名 ， 要 根据 内 容 来 命名 。 比 如 left、right、 
center、red、black 这 类 单词 命名 不 允许 出 现 ， 因 为 若 需 求 要 将 某 个 left 
类 名 的 元 素 放 在 右边 显示 ， 这 就 会 比较 尴 巡 。 推 荐 使 用 功能 和 内 容 相 
关联 的 词汇 命名 ， 如 <nav>、<news>、<type>、 <search> 等 。 


// 不 推荐 
.left{} 


.Ccenter{} 


// 推荐 
.Ui-searchf{} 


.Ui-mainf{} 


HTML 标 签 中 的 id 属 性 一 般 用 于 JavaScript 查 询 DOM 使 用 ， 书 写 
CSS 样 式 时 不 能 用 id 选择 器 ， 因 为 针对 id 的 元 素 样式 很 难 复 用 。 


// 不 推荐 
#news{} 


// 推荐 


.Ui-news{} 


简写 方式 


单位 0 的 缩写 。 如 果 属 性 值 为 0， 则 不 需要 为 0 加 单位 。 如 果 是 以 0 
为 个 数位 的 小 数 ， 前 面 的 0 可 以 省 略 不 写 。 尽 量 带 上 分 号 ， 否 则 在 后 面 
追加 规则 时 容易 因为 没 写 分 号 而 出 错 。 


// 不 推荐 
.Ui-newst 
margin: QOpx; 
padding: Opx; 
opacity: 0.6 


// 推荐 
.Ui-newst 
margin: 0; 


padding: 0; 


opacity: .6; 


去 掉 URL 中 引用 资源 的 引号 ， 这 是 疫 必 要 的 ， 


// 不 推荐 
body{ 


background-image: url("sprites.png"); 


// 推荐 
body{ 


background-image: url(sprites.png); 


颜色 值 写 法 ， 所 有 的 颜色 值 要 使 用 小 写 并 尽量 缩写 


// 不 推荐 
bodyt{ 
background-color: #FF0000 ; 


// 推荐 
body{ 
background-color: #f00; 


属性 书写 顺序 


影响 阅读 。 


至 3 位 。 


CSS 样 式 书 写 顺 序 遵循 先 布局 后 内 容 的 规则 ， 即 先 写 元 素 的 布局 属 
性 ， 再 写 元 素 的 内 容 属性 。 


// 不 推荐 

.Ui-newst 
background: #000; 
margin: 10px; 
padding: 10px; 
color: #000; 
width: 500px; 
height:200px; 
float: left; 


} 

// 推荐 

.Ui-newst 
float: left; 
margin: 10px; 
padding: 10px; 
width: 500px; 
height:200px; 
color: #000; 
background: #000; 

} 


这 一 点 比较 容易 理解 。 优 先 布 局 ， 常 用 的 布局 属性 有 position、 
display、float、overflow 等 。 内 容 次 之 ， 比 如 color、font、text-aligno 


Hack 写 法 


可 能 减少 对 CSS Hack 的 使 用 和 依赖 ， 


可 以 使 用 其 他 的 解决 方案 


人 如 果 必 须 使 用 浏览 器 Hack， 尽 量 选择 稳定 、 常 用 并 
易于 理解 的 书写 方式 。 需 要 注意 的 是 ， 目 前 桌面 端 浏览 器 上 已 经 完全 
舍弃 了 对 Internet Explorer 7 及 以 下 版 本 浏览 器 的 兼容 性 考虑 ， 因 此 当前 
CSS 规 则 的 Hack 形 式 写 法 推荐 如 下 。 


.Ui-news pt{ 


color :#000; /* For all */ 

color:#111\9; /* For all IE */ 

Color :#222\0; /* For IE8 and later, 
*/ 

color :#333\9\0， /* For IE9 and later 
} 


Opera without Webkit 


wh 


CSS 规 则 若 要 实现 在 多 种 浏览 器 内 核 上 兼容 ， 就 要 遵循 先 瑟 私有 属 
性 后 写 标 准 属性 的 原则 ， 这 样 有 利于 浏览 器 版 本 向 前 兼容 。 


.Ui-newst 
-webkit-box-shadow: 1px 
-moz-box-shadow: 1px 
-mSs-box-shadow: 1px 
-0-box-shadow: 1px 


box-shadow: 1px 


1px 
1px 
1px 
1px 
1px 


Spx; 
Spx; 
5px; 
Spx; 
Spx; 


针对 Internet Explorer， 可 以 使 用 条 件 注释 作为 预 留 Hack 来 使 用 ， 
Internet Explorer 条 件 注释 语法 可 以 如 下 书写 。 


<!--[if <keywords>? IE <version>?]> 
<link rel="stylesheet" href="./hack.css" /> 


<![endif]--> 


CSS 高 效 实现 规范 


标签 名 与 id 或 class 组 合 的 选择 器 会 造成 元 余 ， 而 且 降 低 CSS 的 解析 
速度 ， 应 避免 。 


// 不 推荐 


div#ui-doc-active.ui-doct{} 


// 推荐 : 
.Ui-doc{} 


尽量 使 用 简短 的 CSS 实 现 方 式 ， 对 于 无 继承 关系 的 元 素 使 用 合并 的 
写法 更 简洁 。 


// 不 推荐 : 

body{ 
margin-top: 10px; 
margin-right: 10px; 
margin-bottom: 10px; 


margin-left: 10px; 


// 推荐 : 
body{ 


margin: 10px; 


不 同 元 素 之 间 属 性 存在 继承 关系 时 ， 使 用 分 拆 方式 ， 避 人 免 继承 属 
性 的 重复 定义 。 


// 不 推荐 : 
.Ui-newst 
font: bold 12px arial, sans-serif,; 
} 
.Ui-news . new-infof{ 


font: normal 12px arial, sans-serif; 


} 
// 推荐 : 
.Ui-newst 
font: bold 12px arial,sans-serif; 
} 


.Ui-news .new-infof{ 


font-weight:normal; 


使 用 预 处 理 脚 本 编码 开发 


使 用 预 处 理 髓 套 的 方式 描述 元 素 之 间 的 层次 关系 。 


// 不 推荐 

.g-box{} 

.g-box-hd .xx{} 
.g-box-hd .xx .aa{} 


// 推荐 
.g-boxt{ 


.XX{ 


尽 可 能 使 用 预 处 理 器 的 高 效 语 法 来 提高 开发 效率 ， 如 同 套 、 变 
量 、 同 套 属性 、 注 释 、 继 承 和 等， 避免 直接 使 用 CSS 开 发 。 使 用 SASS 来 
编写 CSS 就 高 效 很 多 。 


@import "reset.scss",; 


// 变量 赋值 与 计算 能 
$width: 5px + 10px; 
$height: 5rem， 
$name: box; 

$attr: margin; 


$content: "empty text' Iidefault; 


$maxwidth: 375px; 


// 处 理 函 数 
@function getwidth($n){ 


Q@return $n*3rem - 1irem; 


Q@mixin mod{ 
width: $width ， 
height: ($height + 3rem)/2 
$font-size: 12px; 
$1line-height: 20px; 
font: #{$font-size}/#{$line-height}; 


.Ui-mod-af{ 

// 引用 的 mixin 内 容 将 被 填充 进来 
@include mod; 
&:hovert 


cursor: pointer,; 


} 
&:afterf{ 

content: $content; 
} 


.Pp.#{&name}t{ 
#{attr}-left: 4px; 


@media screen and(max-width: $maxWidth)t{ 


#{attr}-left: 8px; 


// 继承 的 使 用 ， 这 里 .ui-mod-b 继承 了 .ui-mod-a 的 所 有 属性 ， 并 且 覆 写 了 
width 属性 
.Ui-mod-bf{ 

Q@extend .ui-mod-a; 

@if null {width: $maxwidth;} 

width: getwidth(3); 


5.1.4 ”ECMAScript 5 常用 规范 
分 号 


JavaScript 语 名 后面 统一 加 上 分 号 。 以 前 也 有 人 推荐 统一 不 加 分 
号 ， 但 是 加 上 更 容易 阅读 ， 而 且 更 容易 和 换行 语句 区 分 。 


// 语句 之 间 的 关系 不 容易 直接 看 出 
let operate = 1 
Switch(operate){ 


case 1: 


console.10g(1) 
break 

case 2: 
console.10g(2) 
break 

Case 3: 
console.10g(3) 
break 

default: 
break 

} 

// 语句 之 间 的 关系 相对 清晰 一 点 
let operate = 1; 
switch(){ 

case 1: 
console.10g(1); 
break; 

case 2: 
console.10g(2); 
break; 

Case 3: 
console.10g(3); 
break; 

default: 


break; 


空格 


在 所 有 运算 符 、 符 号 与 英文 单词 之 间 添 加 必要 的 空格 ， 利 于 开发 
者 阅读 。 


// 不 推荐 

let a={ 
b :1 

}; 

++ XX; 


Z = x?1:2，; 


for(let i=0;i<6;i++){ 


一 般 推荐 在 代码 块 后 保留 一 行 空 行 ， 显 得 块 内 容 层 次 更 加 分 明 ， 
下 面 的 写法 是 比较 推荐 的 形式 。 


let x = 1; 
for (let i = 0; i < 2; i++) { 
If (true) { 


return false; 


// if 语句 后 保留 空 行 


continue; 


// for 循环 语句 后 保留 空 行 
let obj = { 
foo: function() { 


return 工 ; 


}, 


// 对 象 方法 属性 定义 后 面 保留 一 个 空 行 
bar: function() { 


return 2;，; 


推荐 JavaScript 字 符 串 最 外 层 统 一 使 用 单 引 号 。 


// 不 推荐 


let x = "test"; 


// 推荐 

let y = 'foo'， 
z = '<div id="z"></div>'; 
变量 命名 


标准 变量 采用 怠 峰 式 命名 。 常 量 使 用 全 大 写 形式 命名 ， 并 用 下 男 
线 连接 。 构 造 国 数 首 字 母 大 写 ，jQuery 对 象 推荐 以 “S$ "为 开头 命名 ， 便 
于 分 辨 jQuery 对 象 和 普通 对 象 。 


// 不 推荐 
let max_number = 99; 
let body = $('body'); 


let obj_name; 


function person(name) { 


this.name = name; 


// 推荐 
const MAX_ NUMBER = 99;，; 
const $body = $('body'); 


let objName; 


function Person(name) { 


this.name = name; 


对 象 


对 象 属性 名 不 需要 加 引号 。 对 象 属性 键 值 以 缩 进 的 形式 书写 ， 不 
要 写 在 同一 行 。 数 组 、 对 象 属性 后 不 能 有 二 号 ， 否 则 部 分 浏览 器 可 能 
会 解析 出 错 。 


// 不 推荐 
let a={ 'b': 1, 'c': 2,}; 
let b = [1, 2, 3,] 


// 推荐 
let a={ 
b: 1, 
C3 过 
}; 


let b = [1, 2, 3]; 


大 括号 


程序 中 的 块 代码 推荐 使 用 大 括号 包 于 ， 要 注意 换行 ， 这 样 更 加 清 
晰 ， 而 且 方 便 后 面 扩展 增加 内 容 。 


// 不 推荐 
if (condition) 


doSomething(); 


// 推荐 

If (condition) { 
doSsomething(); 
// 添加 其 他 内 容 


条 件 判 断 


尽量 不 要 直接 使 用 undefined 进 行 变量 判断 ， 使 用 typeof 和 字符 
串 "undefined' 对 变量 类 型 进行 判断 。 分 别 用 ===、!= 三 代替 ==、! 王 更 加 
严 说。 
// 不 推荐 
if (name == undefined) { 


return false; 


// 推荐 
If (typeof person === 'undefined') { 


return false; 


} 

不 要 在 条 件 语 句 或 循环 语句 中 声明 函数 
// 不 推荐 
let name = 'ouven'; 


If (name) { 


sayHi(name); 


function sayHi (name)t 


console.log( HI ${name}. ); 


} 
} 
// 推荐 
let name = 'ouven'; 


If (name) { 


sayHi(name); 


function sayHi (name){ 


console.log( HI ${name}. ); 


一 些 其 他 的 可 选 规范 参考 


for-in 循 环 里 面 要 尽量 含有 hasOwnProperty 的 判断 ， 防 止 访问 不 存 

在 的 对 象 属性 时 出 错 。 不 要 在 内 置 对 象 的 原型 上 添加 方法 ， 如 Array、 

Date， 人 否则 会 污染 JavaScript 内 置 对 象 。 不 要 在 同一 个 作用 域 下 声明 同 

变量 ， 这 是 不 安全 的 JavaScript 书 写 方法 ， 严 格 模式 下 是 禁止 使 用 

的 。 移 除 声 明 但 未 使 用 过 的 变量 。 不 要 在 应 该 比较 的 地 方 赋值 。 不 要 
像 new function 0 {...}、new Object0 等 这 样 使 用 构造 水 数 。 


5.1.5” ECMAScript 6+ 参 考 规范 


ECMAScript 5 的 通用 编码 规范 在 ECMAScript 6 十 中 同样 适用 ， 但 
还 是 推荐 使 用 Ecmacript 6+ 更 高 效 的 语法 来 实现 与 ECMAScript 5 相同 的 
功能 。 


正确 使 用 ECMAScript 6 的 变量 声明 关键 字 


let a = 1; 
let A = 2; 


const b = 'hello'; 


let GE 
const d; // Uncaught SyntaxError: Missing initializer in 
const declaration 


} 


console.log(c); // Uncaught ReferenceError: c is not defined 
b = 'world'; // Uncaught TypeError: Assignment to constant 


letiable. 


字符 串 拼接 使 用 字符 串 模板 完成 


// 不 推荐 
let name = 'ouven'; 
let str = '<h2>hi, ”+name + "</h2>' + 


'<p>hello, world!</p>"'+ 


'<p>2016-12-12</p>'; 


// 推荐 

let name = 'ouven'; 

let str = ‘<h2>hi, ${name}</h2> 
<p>hello, world!</p> 
<p>2016-12-12</p> 


了 


解构 赋值 尽量 使 用 一 层 解构 ， 否 则 声明 变量 骨 套 太 深 难以 
理解 


// 不 推荐 
Jet [[a,b], c] = [[11,22], 33]; 
let {d, e} = { 


d: { 
key:t{ 


name: 'ouven' 


} 
}, 
e: { 
key:t{ 
name: 'zhang' 
} 
} 
}; 
// 推荐 


let [a, b, c] = [11, 22, 33]; 
let {d, e} = { 
d: 'ouven', 

e: 'zhang', 


}; 


数组 拷贝 推荐 使 用 ... 实 现 ， 更 加 简洁 高 效 


const items = [1, 2, 3]; 


let itemsCopy = [|]; 


// 不 推荐 


for (let i = 0,len = items.length; i < len; i++) 


itemsCopy[i] = items[i]; 


// 推荐 


itemsCopy = [...items]; 


数组 循环 遍历 使 用 for...of， 非 必须 情况 下 不 推荐 使 用 
forEach、map、 简 单 循环 


const items = [1, 2, 3]; 


// 不 推荐 
for (let i = 0, len = items.length; i < len; I++) { 


console.log(items[i]); 


// 推荐 
for (let item of items) { 


console.1log(item); 


使 用 ECMAScript 6 的 类 来 代替 之 前 的 类 实现 方式 ， 尽 量 使 
用 constructor 进 行 属性 成 员 变量 赋值 


// 不 推荐 


function Foo(name) { 


this.name = name; 
this.sayHi = function(){ 


console.log('Hi, ' + this.name); 


// 推荐 
class Foo { 
constructor(name = 'ouven') { 
// constructor 


this.name = name; 


} 
sayHi() { 

console.log( Hi, ${this.name} ); 
} 


模块 化 多 变量 导出 时 尽量 使 用 对 象 解构 ， 不 使 用 全 局 导 
出 。 尽 量 不 要 把 import 和 export 写 在 一 行 


// 不 推荐 


import * as util from './l1ib/util'; 


// 推荐 
import { time } from './lib/util'; 


// 不 推荐 
export default { time } from './lib/util'; 


// 推荐 


import { time } from './lib/util'; 


export default time; 


导出 类 名 时 ， 保 持 模块 名 称 和 文件 名 相同 ， 类 名 首 字符 需 
要 大 写 。 


// 推荐 文件 命名 为 Base .js 


class Base { 


export default Base; 


生成 器 中 yield 进 行 异 步 操作 时 需要 使 用 try...catch 包 应 ， 方 
便 对 异常 进行 处 理 


// 不 推荐 
const getNews = function* (){ 


this.body= yield render('path/template') 


// 推荐 


const getNews = function* (){ 


tryt{ 

this.body= yield render('path/template') 
}catch(e)t{ 

log.error(e); 
} 


推荐 使 用 Promise ， 避 免 使 用 第 三 方 库 或 直接 回调 ， 原 生 
的 异步 处 理性 能 更 好 而 且 符 合 语言 规范 


// 不 推荐 使 用 回调 方式 来 处 理 异步 
process('filename', function(data)t{ 


let result = data; 


}); 


// 推荐 使 用 Promise 来 处 理 


let promise = new Primise(function(resolve, reject){}); 


promise.then(function(){ 
// 成 功 处 理 

}, function(){ 
// 失败 处 理 

}); 


如 果 不 是 必须 ， 避 免 使 用 迭代 器 


迭代 器 Iterators 性 能 比较 差 ， 对 于 数组 来 说 大 致 与 
Array.prototype.forEach 相 当 ， 比 不 过 原生 的 for 循 环 ， 而 且 使 用 起 来 比 
较 麻 烦 。 目 前 数组 遍历 提供 了 for..of 方 法 ， 对 象 志 历 提供 了 for..in 方 
法 ， 所 以 非 必 须 情况 下 还 是 不 建议 使 用 迭代 器 。 


const numbers = [1, 2, 3, 4, 5]; 


// 不 推荐 
let iterator = numbers[Symbol.iterator](); 
let result = iterator.next(); 
let sum = 0; 
while (!result.done) { 
sum += result.value; 


result = iterator.next(); 


// 推荐 
let sum = 0; 
for (let num of numbers) { 


sum += num， 


不 要 使 用 统一 码 ， 中 文 的 正则 匹配 和 计算 较 消 耗 时 间 ， 而 
且 容 易 出 问题 


合理 使 用 Generator ， 推 荐 使 用 asyncawait， 更 加 简洁 


// 不 推荐 
const generator = function* (){ 
const numbers = [1, 2, 3, 4, 5]; 
for(let number of numbers ){ 
yield setTimeout(function(){ 
console.1log(number ) ， 


}, 3000); 


let result = generator(); 
let done = result.next(); 
while(!done,done){ 

done = result.next(); 


} 


console.1log('finish'"'); 


// 推荐 


const asyncFunction = async function (){ 


const numbers = [1, 2, 3, 4, 5]; 
for(let number of numbers ){ 
await Sleep(3000 ) 


console.1log(number ) ， 


let result = asyncFunction( ) ; 


console.log('finish'"' )， 


具体 关于 ECMAScript 6 十 特性 的 介绍 和 使 用 可 以 参考 本 书 第 3 章 的 
内 容 。 


5.1.6 ”前 端 防御 性 编程 规范 


前 端 防御 性 编程 通常 不 是 代码 规范 中 的 内 容 ， 但 却 是 前 端 影响 网 
页 功能 稳定 性 的 一 个 很 重要 的 因素 。 简 单 理解 ， 防 御 性 编程 是 指 通过 
检测 任何 可 能 存在 的 逻辑 异 单 问题 的 代码 实现 ， 提 高 脚本 执行 过 程 健 
壮 性 的 一 种 编程 手段 。 防 御 性 编程 要 求 我 们 对 程序 的 实现 进行 更 加 全 
面 、 严 谨 的 考虑 。 在 项 目 实践 中 ， 防 御 性 编程 有 一 些 常 见 的 应 用 场 


旦 
Ee 


对 外 部 数据 的 安全 检测 判断 


外 部 数据 可 能 是 从 后 端 返回 的 内 容 或 用 户 调用 阔 效 时 传 入 的 参数 
等 ， 我 们 先 来 看 一 个 模板 数据 填充 泻 染 的 例子 。 


<div>{{data.userinfo.name }}</div> 
如 果 变 量 data 是 后 端 请 求 返 回 的 外 部 数据 ， 那 么 当 data 没 有 定义 
userinfo 字 段 (如 data={}) 时 ， 前 端的 模板 泻 染 就 会 直接 报错 ， 或 者 显 


示 data.userinfo.name 属 性 未 定义 ， 页 面 上 内 容 显示 可 能 为 空 ， 所 以 我 们 
尽量 不 要 让 这 些 情况 出 现 ， 要 以 一 种 更 安全 的 方式 来 展示 ， 并 保证 模 


板 的 填充 过 程 不 会 出 错 ， 例 如 在 数据 填充 时 进行 判断 ， 如 果 疫 有 内 容 
则 使 用 默认 的 文字 代替 。 


// 不 推荐 


<div>{{ data.userinfo.name }}</div> 


// 推荐 
<div>{{ data.userinfo && data.userinfo.name || "默认 命名 }} 
</div> 


再 如 我 们 在 Web 后 端 对 前 端 提交 的 数据 进行 处 理 时 ， 通 常 需要 先 
行 检 验 再 进行 处 理 ， 以 免 产生 安全 性 漏洞 。 


号 


let id = req.query['id"']; 
// 如 果 id 包含 非 数字 等 不 合法 内 容 ， 则 提示 出 错 并 返回 ， 如 果 合 法 才 进 

行 查询 数据 操作 
if(!/A\d+$/g.test(id))t 

this.body = errorMsg; 
}elsef 

let sql = ‘select * where id=${id}，; 

let data = exec(sdql); 

this.body = data; 


规范 化 的 错误 处 理 


对 于 常用 的 AJAX 请 求 或 长 时 间 文 件 读 写 等 可 能 失败 的 异步 操作 ， 
需要 进行 错误 情况 的 处 理 或 异常 捕获 处 理 ， 而 不 应 该 被 静默 ， 否 则 一 


旦 出 错 ， 用 户 将 得 不 到 正常 的 提示 ， 对 用 户 体 3 


// 不 推荐 

$.ajax({ 
url: 'path/url', 
type: 'get', 
success(data)t{ 


// 数据 请 求 成 功 后 逻辑 


}); 
// 推荐 
$.ajax({ 
url: 'path/url', 
type: 'get', 
success(data)t{ 
// 数据 请 求 成 功 后 逻辑 
}, 
error(exception)t{ 
// 请 求 失败 后 的 逻辑 
} 
}); 
// 不 推荐 


this.body = yield render('path/template'); 


// 推荐 


全 旦 “ 
以 砍 A 


响 极 大 。 


tryt{ 

this.body = yield render('path/template'); 
}catch(e)t{ 

log.error(e); 


this.body = yield render('path/error'); 


天 于 防御 性 编程 需要 注意 的 场景 还 有 很 多 ， 也 是 我 们 编码 过 程 中 
必须 要 注意 的 细节 ， 这 些 代 码 严 谨 性 上 的 考虑 可 以 大 大 减少 代码 执行 
过 程 中 异常 出 错 的 概率 ， 而 且 有 利于 分 析 具 体 的 问题 。 


这 一 节 主 要 介绍 了 前 端的 通用 规范 、HTML 规 范 、CSS 规 范 、 
ECMAScript 5 规范 及 ECMAScript 6 十 规范 、 防 御 性 编程 的 思想 ， 这 些 
都 是 实践 开发 中 需要 关注 的 。 当 然 ， 这 里 列举 的 不 一 定 全 面 ， 也 不 是 
说 这 样 就 是 最 好 的 实践 ， 只 是 给 大 家 提供 一 种 可 选 的 方案 ， 也 让 大 家 
明白 规范 这 样 制定 的 原因 和 好 处 。 大 家 可 以 对 比 下 自己 的 规范 特点 ， 
取长补短 ， 整 理 出 适合 自己 或 团队 的 开发 编码 规范 。 


5.2 ”前 端 组 件 规范 


上 一 节 中 我 们 了 解 了 前 端的 开发 编码 规范 ， 这 一 节 我 们 再 来 了 解 
一 下 与 前 端 相 关 的 组 件 规范 。 


什么 是 组 件 规范 ? 为 什么 需要 组 件 规范 ? 组 件 规 范 和 开发 规范 有 
什么 区 别 和 联系 呢 ? 首先 我 们 可 以 认为 所 谓 的 组 件 通 常 是 指 采 用 代码 
管理 中 的 分 治 思想 ， 将 复杂 的 项 目 代码 结构 拆 分 成 多 个 独立 、 简 单 、 
解 耦 合 的 结构 或 文件 的 形式 进行 分 开 管理 ， 达 到 让 项 目 代 码 和 模块 更 


加 清晰 的 目的 ， 而 组 件 规范 则 是 我 们 进行 拆 分 、 组 织 、 管 理 项 目 代码 
方法 的 一 种 约定 。 所 以 ， 和 开发 规范 相似 ， 组 件 规范 也 是 一 种 约定 。 
不 同 的 是 ， 开 发 规范 关注 文件 内 部 代码 级 别 的 一 致 性 ， 组 件 规范 则 更 
关注 项 目 中 业务 功能 模块 内 容 组 织 的 一 致 性 。 一 定 程度 上 ， 组 件 规范 
包含 了 开发 规范 ， 因 为 各 开发 规范 不 统一 ， 开 发 出 来 的 组 件 风格 便 不 
一 致 ， 组 件 规范 便 也 无 从 说 起 了 。 组 件 规 范 能 够 帮助 我 们 对 功能 模块 
进行 统一 的 约定 管理 ， 通 过 这 一 约定 ， 任 何 一 个 独立 的 功能 模块 之 间 
都 应 该 是 无 耦合 并 能 和 其 他 模块 很 好 对 接 和 组 合 的 。 


下 面 先 来 看 一 下 目前 前 端 主流 的 一 些 组 件 相关 规范 : UI (User 
Interface， 用 户 界面 组 件 规范 、 模 块 化 规范 、 项 目 组 件 化 设计 规范 。 
注意 这 三 者 的 区 别 和 联系 ，UI 规 范 一 般 指 UI 层 设计 和 实现 的 规范 及 统 
一 性 ， 而 模块 化 主要 指 的 是 JavaScript 模 块 化 开发 的 文件 模块 封装 方 
式 ， 项 目 组 件 规范 则 指 的 是 实际 开发 中 整个 项 目 业 务 代码 之 间 的 组 织 


形式 。 


5.2.1 UI 组 件 规 范 


简单 来 说 ，UI 组 件 规范 强调 了 一 个 网 站 中 所 有 网 页 结构 层 和 表现 
层 实 现 的 一 致 性 。 多 个 地 方 出 现 的 相同 按钮 样式 可 以 通过 公共 定义 的 
样式 规范 类 来 描述 ， 而 不 用 每 个 地 方 都 重复 书写 样式 ， 避 免 使 用 不 同 
的 代码 实现 同一 个 效果 。 试 想 如 果 没 有 规范 的 存在 ， 相 同 作 用 的 按钮 
有 时 是 红色 ， 有 时 是 绿色 ， 开 发 维护 时 就 比较 难 统一 处 理 了 。 从 Web 前 
端的 角度 来 看 ，UI 层 的 规范 能 带 来 一 些 明 显 的 好 处 。 


0 UI 层 风 格 统一 化 。UI 层 风格 统一 化 避免 了 不 同 页 面 的 差异 化 设 
计 风 格 ， 能 让 用 户 使 用 web 站 点 的 不 同 网 页 外 观 风 格 是 一 致 


的 。 


o 增加 UI 层 复 用 性 。 使 用 UI 规 范 的 情况 下 ，UI 层 代码 复 用 性 增 
强 ， 可 以 提高 开发 效率 ， 相 同 功 能 的 结构 和 样式 不 用 重复 实 
现 。 


o 更 符合 用 户 的 体验 习惯 。 例 如 红色 按钮 统一 用 来 表示 警告 ， 绿 
色 按 钮 统一 表示 安全 或 成 功 操作 等 。 


o 增加 了 开发 规范 的 统一 性 。 遵 循 统一 的 规范 ， 避 免 重 复 开 发 ， 
避免 产生 多 种 风格 的 代码 。 


假如 网 站 中 的 多 个 页 面 含有 很 多 个 按钮 ， 通 常 的 做 法 是 把 这 些 按 
钮 分 成 几 类 ， 为 每 一 个 按钮 元 素 增 加 类 名 ， 这 样 写 按钮 时 融 不 用 重复 
定义 了 ， 代 码 如 下 。 


.Ui-btnf{ 
position: relative; 
text-align: center,; 
background-color: $button-bg-color; 
background-image: $button-bg-image; 
vertical-align: top; 


color: $button-text; 


.Ui-btn-primaryt{ 
background-color: $button-primary-bg-color; 
border-color: $button-primary-border-color; 


&:not(.disabled):not(:disabled):active, 


&.activef{ 
background: $button-primary-active-bg; 


border-color: $button-primary-active-bg; 


.Ui-btn-warning{ 
background-color: $button-warning-bg-color; 
border-color: $button-warning-border-color; 
&:not(.disabled):not(:disabled):active, 
&.activef{ 
background: $button-warning-active-bg; 


border-color: $button-warning-active-bg; 


这 样 一 来 ， 我 们 定义 不 同 的 HTML 按 钮 就 可 以 直接 使 用 了 ， 而 且 网 
站 任何 其 他 地 方 使 用 按钮 引用 的 方法 是 一 致 的 ， 就 像 使 用 过 的 UI 框架 
一 样 。 不 同 的 是 ， 我 们 是 根据 网 站 页 面 的 特点 开发 UI 组 件 库 的 。 


<button class="ui-btn ui-btn-primary"> 通 用 按钮 </button> 


<button class="ui-btn ui-btn-warning"> 警 告 按钮 </button> 


那么 自己 设计 UI 组 件 规范 具体 需要 遵循 哪些 原则 呢 ? 在 实际 的 团 
队 开 发 中 ，UI 组 件 规 范 的 完成 可 能 需要 以 下 几 个 方面 的 协作 。 

1. UI 设计 一 致 性 。 在 需求 开发 初始 阶段 ， 一 般 可 以 通过 会 议 讨论 
等 沟通 方式 反复 确认 保证 UI 层 设计 都 是 准确 的 ， 但 尽管 如 此 ， 如 果 没 


有 UI 规范 的 约束 ， 仍 有 可 能 出 现 某 几 个 相同 功能 的 按钮 在 不 同 的 页 面 
中 样式 不 同 的 情况 。 也 就 是 说 ，UI 设 计 层 需要 统一 ， 相 同 功能 的 模块 
在 相同 场景 下 结构 层 和 表现 层 应 该 是 一 臻 的， 否则 UI 规范 就 没 办 法 实 
现 了 。 


2. 开发 实现 的 一 致 性 。 这 就 涉及 开始 说 到 的 编码 开发 规范 了 ， 尽 
可 能 让 所 有 的 UI 层 实现 使 用 同样 的 开发 规范 和 方式 。 例 如 样式 定义 、 
图 片 引 用 、 命 名 规范 等 ， 就 图 片 引 用 来 说 ， 图 标 使 用 base64 实 现 还 是 使 
用 小 图 片 实现 ， 抑 或 使 用 iconfont 实 现 ， 都 需要 统一 ， 不 能 多 种 方式 混 
合 ， 否 则 就 增加 了 UI 组 件 的 使 用 复杂 度 。 


所 以 从 开发 实现 上 ， 如 果 想 要 设计 实现 一 个 具有 通用 组 件 规范 的 
UI 库 (也 可 能 包含 了 JavaScript 逻 辑 ) ， 必 须 考 虑 以 下 几 个 方面 的 问 


题 。 


o 统一 的 页 面 布 局 方案 。 页 面 布局 使 用 网 格 布局 还 是 REM 方 案 ， 
是 否 需要 支持 响应 式 ， 如 果 是 移动 端 应 该 怎样 适 配 ， 这 些 是 
需要 优先 考虑 的 。 


o 基础 UI 结构 和 样式 实现 。 样 式 reset、 按 钮 、 图 片 、 菜 单 、 表 单 
等 基础 结构 与 样式 的 统一 化 设计 实现 ， 可 以 极 大 提高 页 面 内 
容 的 复 用 性 和 开发 效率 。 


o 组 件 化 UI 结 构 和 样式 实现 。 例 如 按钮 组 、 字 体 图 标 、 下 拉 菜 
单 、 输 入 框 组 、 导 航 组 、 面 包 届 、 分 页 、 标 签 、 轮 播 、 弹 出 
框 、 列 表 、 多 媒体 、 和 敬告 框 等 常用 组 件 的 实现 。 当 然 网 站 可 
能 不 会 一 次 性 用 到 这 么 多 ， 但 是 如 果 要 考虑 设计 一 个 通用 的 
UI 组 件 库 ， 这 些 仍然 是 要 考虑 的 。 


o ”响应 式 布局 。 如 果 需 要 支持 页 面 响应 式 ， 布 局 、 结 构 、 样 式 、 
媒体 、javascript 响 应 式 等 这 些 就 都 要 考虑 了 。 具 体 的 实现 技 
术 可 以 参考 第 3 章 第 7 节 介 绍 的 内 容 。 


o 扩展 性 。 如 果 某 个 地 方 用 到 了 比较 特殊 的 样式 或 逻辑 ， 其 他 开 
发 者 也 是 可 以 方便 地 在 原来 的 代码 上 进行 扩展 的 。 


以 SASS 为 例 ， 图 5-1 是 目前 一 个 典型 的 网 站 基础 UI 组 件 库 的 样式 设 
计 结 构 ， 入 口 文件 base.scss 通 过 引用 不 同 目录 下 不 同 内 容 的 模块 编译 生 
成 浏览 器 运行 的 最 终 CSS 样 式 文 件 ， 其 中 每 个 SCSS 文 件 模块 单独 管理 
一 个 功能 的 实现 : _variable.scss 可 以 专门 管理 后 面 可 能 使 用 到 的 变量 
值 、_mixin.scss 用 于 统一 管理 需要 复 用 的 样式 规则 、_btn.scss 用 来 实现 
具体 多 个 按钮 组 件 的 样式 、_animation.scss 则 保存 所 有 的 动画 实现 。 


/rN 
入 口 编译 模块 | 
component 
base. scss 
We 


= 
1 人 六 


图 5-1 ”UI 组 件 表现 层 管 理 


通过 这 样 的 设计 实现 UI 层 组 件 规范 就 会 显得 结构 很 清晰 ， 便 于 团 
队 并 行 协作 开 发 ， 有 利于 调试 时 快速 定位 问题 。base.scss 中 统一 引入 其 
他 样式 模块 的 代码 如 下 。 


@import 


"common/reset", 
"common/mixin", 
"common/variable", 
"common/icon-font", 


"common/rem", 


"fix/grid", 
"fix/animation", 


"fix/placeholder", 


"component/btn", 
"component/btn-group", 
"component/form", 
"component/slider", 
"component/tab", 
"component/loading", 
"component/notice", 
"component/dialog", 


"component/searchbar"; 


5.2.2 ”模块 化 规范 


模块 化 规范 平时 讨论 比较 多 ， 它 可 以 认为 是 JavaScript 文 件 之 间 相 
互 依赖 引用 的 一 种 通用 语法 约定 ， 就 是 按照 一 定 的 规范 来 写 JavaScript 
文件 ， 让 它 可 以 方便 地 被 其 他 JavaScript 文 件 引 用 。 就 规范 种 类 来 说 ， 
主要 包括 AMD (Asynchronous Module Definition， 异 步 模块 定义 ) 、 
CMD (Common Module Definition ， 通 用 模块 定义 ) 、CommonJS、 
importexport 等 ， 未 来 也 可 能 出 现 其 他 的 规范 ， 下 面 逐个 介 经 


AMD 


AMD 是 运行 在 浏览 器 端的 模块 化 异步 加 载 规 范 ， 主 要 以 requireJS 
为 代表 ， 基 本 原理 是 定义 define 和 require 方 法 异步 请 求 对 应 的 javascript 
模块 文件 到 浏览 器 端 运行 。 模 块 执行 导出 时 可 以 使 用 函数 中 的 retum 返 
回 结果 。 


// id: 模块 的 命名 ， 可 选 参 数 
// dependencies: 加 载 的 模块 依赖 列表 
// factory: 处 理 函 数 ， 即 对 dependencies 加 载 的 模块 进行 的 处 理 


define(id, dependencies, factory); 


例如 某 个 主 模块 main 中 引用 了 两 个 JavaScript 文 件 模 块 mod-A 和 
mod-B， 那 么 主 模块 调用 这 两 个 文件 模块 并 进行 初始 化 的 代码 如 下 。 


// 页 面 中 引用 依赖 的 方式 
require('main', ['./mod-A.js', './mod-B.js'], function(A, B){ 


A.init(); 


B.init():; 
}); 


// mod-A.js 
define('A', ['zepto'], function($)f{ 
return { 
init(){ 


console.log('A') 


}); 


// mod-B.js 的 写法 
define('B', ['zepto'], function($)f{ 
return { 
init(){ 


conSsole,1og('B') 


}); 


需要 注意 的 是 ， 主 模块 处 理 函 数 是 在 . /mod-A.js 和 . /mod-B.js 加 
载 完成 并 执行 结束 后 才 执 行 的 ， 即 使 处 理 函 数 中 没有 用 到 这 两 个 模 
块 ，./mod-A.js 和 . /mod-B.js 一 旦 被 依赖 引用 就 会 被 加 载 执行 。 


CMD 


CMD 是 Seajs 提 出 的 一 种 模块 化 规范 ， 在 浏览 器 端 调用 类 似 
CommonJS 的 书写 方式 来 进行 模块 引用 ， 但 却 不 是 完全 的 CommonJS 规 
范 。CMD 遵 循 按 需 执行 依赖 的 原则 ， 只 有 在 用 到 某 个 模块 的 时 候 才 会 
执行 模块 内 部 的 require 语 句 ， 同 时 加 载 完 某 个 依赖 模块 文件 后 并 不 立即 
执行 ， 在 所 有 依赖 模块 加 载 完 成 后 进入 主 模 块 逻 辑 ， 电 到 模块 运行 语 
句 的 时 候 才 执行 对 应 的 模块 ， 这 和 AMD 是 有 区 别 的 。 


define(function(require, exports, module) {}) ; 


以 seajs 为 例 ， 主 模块 main 中 引用 了 两 个 JavaScript 模 块 mod-A 和 
mod-B， 调 用 这 两 个 文件 模块 并 进行 初始 化 的 代码 如 下 。 


seajs.use([' ./mod-A,js' ,， ' ./mod-B.js' ] ,§ function(A, B) { 
A.init(); 
B.init(); 

}); 


// mod-A.js 的 写法 
define(function(require, exports, module) { 
let $ = require('zepto'); 
module.exports = { 
init(){ 


console.1log('A'); 


}); 


// mod-B.js 的 写法 


define(function(require, exports, module) { 
let $ = require('zepto'); 
module.exports = { 
init(){ 


console.1log('B'); 


}); 


与 AMD 规 范 不 同 的 是 ， 在 引用 . /mod-A.js 和 . /mod-B.js 两 个 文件 
后 ，seajs 会 下 载 两 个 模块 文件 但 不 会 立刻 执行 ， 在 运行 init 方 法 时 才 会 
分 别 执行 两 个 模块 以 及 处 理 函 数 中 的 动作 。 


CommonJS 


CommonJS 是 Node 端 使 用 的 JavaScript 模 块 化 规范 ， 使 用 require 进 行 
模块 引入 ， 并 使 用 modules.exports 来 定义 模块 导出 。 与 前 面 两 种 方式 相 
比 ，CommonJS 的 写法 更 加 清晰 简洁 。 


// main,js 
let A = require('./mod-A.js'), 


B = require('./mod-B.js'); 


A.init(); 


B.init(); 


// mod-A.js 的 写法 


const $ = require( 'zepto ' ) ; 
module.exports = { 
init()f{ 


console.1log('A' ); 


// mod-B.js 的 写法 
const $ = require('zepto'); 
module.exports = { 

init(){ 


console.log('B'); 


我 们 一 般 理 解 的 module.exports 与 exports 是 同一 个 对 象 的 不 同 引 
用 ， 即 exports 可 以 通俗 理解 为 module.exports 的 别名 ， 但 是 在 模块 导 


出 时 必须 使 用 module.exports。 


import/export 


import/export 是 ECMAScript 6 定义 的 JavaScript 模 块 引用 方式 ， 是 唯 
一 一 个 遵循 JavaScript 语 言 标准 的 模块 化 规范 ， 在 讲解 ECMAScript 6 的 
时 候 也 重点 进行 了 分 析 。importyexport 使 用 import 引 入 其 他 模块 ， 使 用 


export 来 进行 模块 导出 。 


Import { initA } from './mod-A.js'; 


import { initB } from './mod-B.js'; 


initA( ); 


initB( ); 


// mod-A.js 的 写法 


import Zepto as $ from 'zepto'; 


export default { 
initA(){ 


console.1log('A'); 


}; 


// mod-B.js 的 写法 


import Zepto as $ from 'zepto'; 


export default { 
initB(){ 


console.1log('B'); 


一 般 不 建议 直接 使 用 import Zepto as $ from'base' 进 行 模 块 引用 ， 
但 如 果 需 要 导出 整个 对 象 时 ， 则 必须 这 么 做 。 


除了 了 解 这 些 常用 的 模块 化 规范 外 ， 我 们 也 应 该 尽量 理解 模块 依 
赖 加 载 的 过 程 。 例 如 使 用 define 或 require 去 读 取 依赖 模块 的 依赖 列表 进 
行 引用 时 ， 一般 模块 化 支持 库 会 有 一 个 baseUrl 配 置 或 全 局 的 id 配 置 ， 
这 时 引用 的 id 或 路 径 会 与 baseUrl 进 行 拼 接 ， 计 算 生成 一 个 绝对 或 相对 
路 径 ， 例 如 ..pathmod-A.js， 然 后 浏览 器 创建 一 个 <script> 来 加 载 这 个 
相对 路 径 的 文件 (Node 端 则 是 通过 dlopen 方 法 进行 模块 文件 内 容 读 
取 ) 执行 ， 同 时 为 了 避免 循环 依赖 的 问题 ， 我 们 通常 会 将 已 经 加 载 的 
文件 标识 存 入 一 个 缓存 数组 中 ， 例 如 ['.. 了 path/a.js' ]， 下 次 如 果 重 复 引 
用 到 同样 的 文件 模块 中 则 无 须 重复 加 载 ， 而 是 直接 引用 这 个 模块 的 返 
回 ， 然 后 依次 运行 加 载 的 模块 即 可 ， 这 样 就 完成 了 JavaScript 模 块 文件 
的 依赖 引用 与 执行 。 


关于 模块 化 规范 有 一 个 容易 误解 的 地 方 : 很 多 人 认为 AMD 规 范 只 
能 在 浏览 器 端 使 用 ，CommonJS 只 能 在 Node 端 使 用 。 这 里 要 理解 的 是 ， 
模块 化 规范 只 是 规范 ，AMD 最 早 被 使 用 在 浏览 器 端 不 代表 其 只 能 在 浏 
览 器 端 运行 ， 主 要 还 是 取决 于 模块 化 规范 的 支持 库 运行 在 哪里 。 例 如 
requireJS 能 在 浏览 器 端 运行 AMD 规 范 ， 在 Node 端 也 可 以 实现 ， 不 过 
Node 妆 已 经 有 了 自己 的 规范 ， 就 不 需要 去 尝试 其 他 方式 了 。 


5.2.3 ”项 目 组 件 化 设计 规范 


前 端 技术 发 展 到 现在 ， 为 了 实现 对 其 复杂 的 项 目 进 行 管理 ， 我 们 
通常 使 用 组 件 ， 而 且 目 前 实现 组 件 化 的 方案 也 已 经 越 来 越 多 : Web 
Component 组 件 化 、MVVM 框 架 组 件 化 、 基 于 Virutal DOM 框 架 的 组 件 
化 、 直 接 基 于 目录 管理 的 组 件 化 等 ， 其 中 基于 每 一 类 方法 的 实践 方案 


也 比较 多 ， 下 面 我 们 选择 一 些 比较 有 代表 性 的 实践 方案 来 看 看 每 种 组 
件 化 的 具体 设计 思路 。 


Web Component 组 件 化 


前 面 讲 到 了 HTML 已 经 发 展 到 Web Component 规 范 阶段 ， 同 时 也 介 
绍 了 什么 是 web Component， 我 们 来 看 一 个 简单 的 基于 Web Component 
的 典型 组 件 化 实现 方案 PolymerPolymer 是 Google 在 2013 年 的 Google IO 
大 会 上 提出 的 一 个 新 的 UI 框架 ， 使 用 了 Web Component 标 准 ， 并 且 针 对 
各 种 平台 的 浏览 器 ，Polymer UI 库 和 组 件 都 具备 较 好 的 兼容 性 。 


Polymer 框 架 的 设计 主要 分 成 三 个 层次 。 


1. 基础 层 (platform.js) : 基本 实现 库 。 基 础 层 一 般 都 是 本 地 浏览 
器 的 API， 例 如 Object.observe0、 事 件 处 理 、shadow DOM、 自 定义 元 
素 、HTML 导 入 、 模 型 驱动 视图 等 。 


2. 核心 层 \polymerjs) : 可 以 理解 为 实现 基础 层 的 封装 库 。 
3. 元 素 层 : 建立 在 核心 层 之 上 的 UI 组 件 或 非 UI 组 件 。 


我 们 要 明白 ，Web Component 是 Polymer 框 架 实现 的 最 重要 基础 ， 
Polymer 的 设计 是 面向 组 件 的 ， 使 用 HTML imports 技 术 来 加 载 组 件 ， 定 
义 的 元 素 也 可 以 没有 用 户 界 面 。 我 们 以 自 定义 的 某 个 组 件 为 例 ， 来 看 
看 Polymer 的 具体 实现 思路 。 


<1doctype html> 
<html> 


<head> 


<meta charset="utf-8"/> 
<title> 图 文 组 合 插件 </title> 
<script src="../components/platform/platform.js"></script> 
<!-- import 引入 组 件 内 容 - -> 
<link href="./image.html" rel="import" /> 
</head> 
<body> 
<!- - 这 里 注册 生成 了 一 个 shadow host 为 <x-image> 的 DOM 元 素 --> 
<x-image src="./image.jpg" width="290" height="160"></x- 
image> 
</body> 
</html> 


图 5-2 为 Polymer 组 件 化 规范 样 例 ， 显 示 了 一 个 带 浮 层 文 字 的 图 片 显 
示 组 件 。Polymer 支 持 双 向 的 数据 绑 定 ， 更 新 数据 模型 会 反映 在 DOM 
上 ， 而 DOM 上 的 用 户 输入 也 会 立即 修改 数据 模型 上 的 数据 。 对 于 
Polymer 元 素来 说 ， 对 应 数据 模型 始终 是 元 素 本 身 。 


290x160 


图 5-2 ”Polymert 组 件 化 规范 样 例 


<x-image name="x-image"> 


<style> 


</style> 
<template> 
<div class="x-image-section"> 
<span class="x-image-image"> 
<img class='image' src="" alt="image" height="200"> 
</span> 
<span class="x-image-text">{{text}}</span> 
</div> 
</template> 
<script> 
Polymer({ 
is: 'x-image', 
properties: { 
text : ' 带 文字 描述 的 图 片 ' 
} }); 
</script> 


</X-Image> 
元 素数 据 模 型 可 以 用 如 下 方式 直接 修改 。 
document ,querySelector('x-image').text = ' 修 改 的 文字 描述 图 片 ' ; 


关于 Polymer 应 用 的 内 容 还 有 很 多 ， 这 里 介绍 的 是 Web Component 
这 种 组 件 化 实现 的 技术 原理 和 使 用 。 实 际 上 ，Polymer 自 提出 后 到 现在 


并 没有 得 到 很 广泛 的 实践 ， 但 是 其 遵循 Web Component 规 范 的 这 一 实践 
思路 被 越 来 越 多 的 组 件 化 框架 借鉴 。 


MVVM 框 架 组 件 化 


MVVM 组 件 化 在 实现 上 比较 有 吸引 力 ， 但 其 实 非常 简单 ， 其 基本 
思路 是 将 页 面 中 的 模块 按照 元 素来 划分 ， 并 将 与 这 个 模块 相关 的 
MVVM 描 述 语法 、CSS 样 式 、 执 行 脚本 放 在 同一 个 文件 里 进行 引用 。 


<style> 
bodyt{ 
background-color: #ccc; 
} 
</style> 
<template> 
<h2>{{ text }}</h2> 
<button q-on="clickEvent(this)"></button> 
</template> 
<script> 
let $ = require('jQuery'); 
module.exports = { 
data: { 
text; ' 这 是 一 段 描 述 ' 
}, 
events: { 
clickEvent() { 


console.log(this.model.data. text ); 


}; 


</script> 


一 般 推 荐 每 个 组 件 以 单个 文件 的 形式 来 引入 模块 相关 内 容 ， 然 后 
通过 构建 或 动态 解析 的 方式 动态 获取 该 组 件 包含 的 CSS、HTML、 
JavaScript 脚 本 到 页 面 中 使 用 ， 而 且 组 件 内 容 书 写 的 方式 也 往往 和 
Polymer 类 似 ， 前 端的 三 层 结构 要 绑 在 一 起 管理 。 相 比 之 下 ， 和 Polymer 
主要 的 区 别 在 于 其 使 用 的 不 是 自 定义 元 素 组 件 ， 而 是 带 有 MVVM 语 法 
的 HTML 标签。 所 以 目前 主流 MVVM 组 件 化 的 设计 思路 和 Polymer 的 实 
现 思路 基本 是 类 似 的 。 


Virtual DOM 的 组 件 化 方案 


之 前 讲 到 ，Virtual DOM 的 出 现 更 多 情况 下 是 为 了 改善 MVVM 的 
DOM 性 能 。 以 reactjs 为 例 ， 昌 然 reactjs 改 变 了 我 们 对 DOM 操 作 的 原 有 理 
解 ， 但 是 在 组 件 化 设计 实现 方面 ， 它 使 用 的 仍 是 和 Polymer 类 似 的 组 织 
管理 方式 ， 所 不 同 的 是 将 HTML 的 结构 描述 换 了 另 一 种 语法 形式 且 
JavaScript 的 调用 API 不 同 。 


const React = require('react'); 
const ReactDOM = require('react-dom'); 


const styles = require('./mod.css'); 


let TextImage= React.createClass({ 


// 组 件 Virtual DOM 描述 语法 


clickEvent(){ 


console.1log(this.props. text ); 


}, 
render() { 
return ( 
<div> 
<h2>{ this.props.text }</h2> 
<button onClick="{ this.clickEvent }"></button> 
</div> 
); 
} 
}); 


export default TextImage; 


这 是 个 简单 的 例子 ， 和 MVVM 的 方式 相 比 ， 其 组 件 内 容 结构 和 使 
用 方式 仍 是 类 似 的 ， 不 同 点 只 在 于 页 面 逻 辑 的 执行 过 程 和 框架 的 使 
用 ， 但 这 并 不 是 和 组 件 化 规范 设计 相关 的 内 容 。 


基于 目录 管理 的 通用 组 件 化 实践 


目前 主流 框架 的 组 件 化 实践 方案 虽然 很 多 且 表 现形 式 不 相同 ， 但 
是 实现 设计 的 基本 思路 还 是 一 样 的 ， 即 和 Polymer 保 持 一 致 : 将 页 面 的 
三 层 结构 内 容 绑 定 到 一 起 作为 一 个 独立 的 组 件 存在 ， 然 后 通过 解析 应 
用 到 页 面 中 执行 。 当 然 ， 如 果 将 三 层 结 构 直 接 绑 到 一 起 可 能 会 有 些 问 


题 ， 例 如 CSS 解 析 失 败 会 导致 整个 模块 加 载 失 败 ， 结 构 比 较 混 靖 时 三 层 
结构 不 分 离 ， 不 容易 进行 团队 协作 。 


既然 如 此 ， 我 们 使 用 一 个 目录 的 形式 来 分 开 管理 前 端 页 面 的 三 层 
结构 则 不 更 加 灵活 方便 吗 ?” 对 组 件 的 三 层 结构 进行 文件 划分 ， 各 个 文 
件 负责 自己 的 功能 部 分 ， 然 后 在 构建 生成 的 时 候 进 行 组 件 中 不 同类 文 
件 内 容 的 打包 处 理 。 


/component 

index.es // 组 件 逻 辑 处 理 
index.scss // 组 件 预 处 理 脚本 
index.html // 组 件 HTML 结构 

/img // 组 件 可 能 用 到 的 背景 图 片 


按照 这 个 思路 ， 组 件 三 层 结构 的 每 一 部 分 都 解 耦合 并 且 与 使 用 的 
框架 无 关 。 例 如 JavaScript 部 分 可 以 任意 选择 ECMAScript 6 十 或 
typescript 进 行 开 发 ， 或 者 是 使 用 不 同 的 框架 编写 。CSS 预 处 理 也 能 任意 
选择 团队 熟知 的 预 处 理 语 法 。HTML 结 构 层 可 以 自由 选择 普通 前 端 模 
板 、MVVM 的 语法 结构 或 者 Virtual DOM 的 描述 语法 实现 ， 只 要 脚本 支 
持 即 可 。 


总 结 来 看 ， 尽 管 这 里 讲 了 四 种 不 同形 式 的 组 件 化 实践 方案 ,但 它 
们 的 设计 思路 是 一 致 的 ， 都 是 前 端 三 层 结 构 的 组 织 规范 设计 。 尽 管 目 
前 不 同 主流 框架 实现 组 件 化 的 思路 都 有 各 自 的 亮点 ， 但 并 没有 太 多 差 
异 的 地 方 。 因 此 更 推荐 使 用 组 件 目 录 式 的 组 件 化 设计 规范 ， 通 过 目录 
来 管理 组 件 ， 而 不 是 通过 文件 或 依赖 具体 的 某 个 框架 。 前 面 的 三 种 方 
式 也 可 以 很 容易 地 改 成 基于 目录 规范 的 形式 ， 这 样 就 可 以 做 到 三 层 结 
构 开 发 分 离 并 且 更 加 灵活 地 控制 ， 更 有 利于 前 端 项 目的 开发 和 维护 。 


我 们 再 来 看 一 下 设计 一 个 高 效 的 组 件 化 规范 应 该 解决 哪些 问题 。 


o 组 件 之 间 独 立 、 松 耦合 。 组 件 之 间 的 HIML、JavaScript、CSS 
之 间 相 互 独立 ， 尽 量 不 重复 ， 相 同 部 分 通过 父 级 或 基础 组 件 


来 实现 ， 最 大 限度 减少 重复 代码 。 


o 组 件 间 藤 套 使 用 。 组 件 可 以 俯 套 使 用 ， 但 储 套 后 仍然 是 独立 、 
松 耦 合 的 。 


o 组 件 间 通 信 。 主 要 指 组 件 之 间 的 函 效 调用 或 通信 ， 例 如 A 组 件 
完成 某 个 操作 后 希望 B 组 件 执 行 某 个 行为 ， 这 种 情况 就 可 以 使 
用 监听 或 观察 者 模式 在 B 组 件 中 注册 该 行为 的 事件 监听 或 加 入 
观察 者 ， 然 后 选择 合适 的 时 机 在 A 组 件 中 触发 这 个 事件 监听 或 
通知 观察 者 来 触发 B 组 件 中 的 行为 操作 ， 而 不 是 在 A 组 件 中 直 
接 拿 到 B 组 件 的 引用 并 直接 进行 操作 ， 因 为 这 样 组 件 之 间 的 行 


为 就 会 产生 耦合 。 


o 组 件 公用 部 分 设计 。 组 件 的 公用 部 分 应 该 被 抽 离 出 来 形成 基础 


库 ， 用 来 增加 代码 的 复 用 性 。 
o 组件 的 构建 打包 。 构 建 工具 能 够 自动 解析 和 打包 组 件 内 容 。 


o 异步 组 件 的 加 载 模 式 。 在 移动 端 ， 通 常 考虑 到 页 面 首 屏 ， 异 步 
的 场景 应 用 非常 广 沁 ， 所 有 异步 组 件 不 能 和 同步 组 件 一 起 处 
理 。 这 时 可 以 将 异步 组 件 区 别 于 普通 组 件 的 目录 存放 ， 并 在 


打包 构建 时 进行 异步 打包 处 理 。 


o 组 件 继承 与 复 用 性 。 对 于 类 似 的 组 件 要 做 到 基础 组 件 复 用 来 减 


少 重复 编码 。 


o 私有 组 件 的 统一 管理 。 为 了 提高 协作 效率 ， 可 以 通过 搭建 私有 
源 的 方式 来 统一 管理 组 件 库 ， 例 如 使 用 包 管 理工 具 等 。 但 这 
点 即使 在 大 的 团队 里 面 也 很 难 实施 ， 因 为 业务 组 件 的 实现 常 
常 需要 定制 化 而 且 经 常 变更 ， 这 样 维 护 组 件 库 成 本 反而 更 
大 ， 目 前 可 以 做 的 是 将 公用 的 组 件 模块 使 用 私有 源 管理 起 
来 。 


o 根据 特定 场景 进行 扩展 或 自 定 义 。 如 果 当 前 的 组 件 框架 不 能 满 
足 需求 ， 我 们 应 该 能 够 很 便捷 地 拓展 新 的 框架 和 样式 ， 这 样 
就 能 适应 更 多 的 场景 需求 。 比 如 在 通过 目录 管理 组 件 的 方案 
下 ， 既 可 以 使 用 MVVM 框 架 进 行 开 发 ， 也 可 以 使 用 Virtual 
DOM 框 架 进 行 开 发 ， 但 要 保持 基本 的 规范 结构 不 变 。 


关于 组 件 规 范 ， 我 们 主要 了 解 了 UI 组 件 规范 、 模 块 化 规范 和 组 件 
设计 规范 。 对 于 组 件 设计 规范 ， 我 们 要 认识 其 本 质 一 一 前 端 三 层 结 构 
的 设计 和 组 织 形 式 。 个 人 推荐 使 用 目录 的 组 件 规范 设计 形式 来 更 加 灵 
活 地 管理 和 组 织 代码 。 


5.3 ”自动 化 构建 


在 现代 前 端 工程 开发 中 ， 上 自动 化 构建 已 经 成 为 一 个 必 不 可 少 的 部 
分 ， 本 节 我 们 就 来 讨论 一 下 前 端 自动 化 构建 方面 的 知识 。 


目前 的 构建 工具 多 种 多 样 ， 设 计 的 思路 也 略 有 不 同 ， 但 是 整体 的 
实现 原理 却 是 基本 一 致 的 。 这 里 我 们 仍 以 讲述 构建 工具 和 流程 原理 性 
的 内 容 为 主 ， 目 的 是 希望 你 不 仅 掌 握 如 何 使 用 现在 的 构建 工具 ， 同 时 
也 能 了 解构 建 工具 自动 完成 构建 的 过 程 。 


是 到 前 端 自动 化 构建 工具 ， 我 们 可 以 追溯 到 软件 开发 时 代 的 IDE 
(Integrated Development Environment， 集 成 开发 环境 ) 。IDE 在 软件 编 
译 运 行 阶段 将 软件 所 需要 的 代码 、 资 源 、 图 片 等 打包 成 一 个 可 以 独立 
运行 的 软件 安装 包 ， 然 后 在 不 同 平台 上 安装 运行 。 前 端 开 发 中 是 没有 
这 样 的 IDE 的 ， 因 为 前 端 代 码 不 需要 软件 编译 。 举 一 个 简单 的 例子 ， 我 
们 在 一 个 页 面 中 使 用 了 多 个 背景 图 片 ， 但 是 想 把 这 几 个 背景 图 片 请 求 
合成 一 个 图 片 (俗称 雪 腰 图 ) ， 以 前 我 们 可 能 会 手动 把 这 些 图 片 放 在 
一 个 大 背景 图 片 中 ， 然 后 通过 元 素 的 背景 图 偏 移 量 来 实现 多 个 元 素 对 
它 的 引用 。 后 来 ， 页 面 又 添加 了 一 个 图 片 ， 我 们 就 在 这 个 原 有 合成 的 
大 图 片 中 新 添加 了 一 个 图 片 。 很 多 人 应 该 有 过 这 样 的 经 历 ， 这 样 很 厅 
烦 ， 于 是 我 们 希望 能 有 一 个 像 软件 IDE 这 样 的 工具 ， 对 代码 进行 分 析 ， 
把 引用 的 各 种 资源 打包 统一 处 理 ， 上 自动 输出 成 为 理想 的 结构 。 合 并 多 
个 背景 图 片 只 是 其 中 一 个 场景 ， 这 一 类 问题 就 是 前 端 构 建 工 具 需 要 解 
决 的 ， 某 种 意义 上 ， 前 端 构建 工具 很 像 软 件 开发 IDE 的 编译 打包 处 理 模 
块 。 


5.3.1 ”自动 化 构建 的 目的 


前 端 构建 工具 的 作用 可 以 认为 是 对 源 项 目 文件 或 资源 进行 文件 级 
处 理 ， 将 文件 或 资源 处 理 成 需要 的 最 佳 输出 结构 和 形式 。 在 处 理 过 程 
中 ， 我 们 可 以 对 文件 进行 模块 化 引入 、 依 赖 分 析 、 资 源 合 并 、 压 缩 优 
化 、 文 件 能 入 、 路 径 珍 换 、 生 成 资源 包 等 多 种 操作 ， 这 样 融 能 完成 很 
多 原本 需要 手动 完成 的 事情 ， 极 大 地 提高 开发 效率 。 


5.3.2 ”自动 化 构建 原理 


流 的 构建 工具 虽然 种 类 较 多 ， 但 原理 相通 。 下 面 我 们 来 看 看 目 
前 主流 的 构建 工具 的 实现 原理 和 过 程 。 首 先 要 明确 的 是 ， 自 动 化 构建 
是 基于 项 目 代码 文件 级 的 分 析 处 理 ， 下 面 以 一 个 通用 构建 工具 实现 的 
文件 处 理 流 程 为 例 向 大 家 介绍 。 


如 图 5-3 所 示 ， 构 建 的 流程 主要 分 成 7 个 基本 步骤 (不同 的 构建 工具 
各 有 差异 ， 但 基本 原理 是 类 似 的 ) : 读 取 入 口 文 件 - 分 析 模 块 引用 一 
按照 引用 加 载 模块 -模块 文件 编译 处 理 - 模 块 文件 合并 一 文件 优化 处 
理 - 写 入 生成 目录 。 


build 1 build 2 build 3 build 4 build 5 build 6 build 7 


分 析 模 块 按照 引用 模块 文件 模块 文件 文件 优化 写 入 生成 
引用 加 载 模块 编译 处 理 合并 处 理 目录 


图 5-3 ”构建 原理 流程 


<!-- index.html --> 

<IDOCTYPE html> 

<htm] lang="en"> 

<head> 
<meta charset="UTF-8"> 
<title>Document</title> 
<!--style--> 

</head> 

<body> 
<mod-A></mod-A> 
<mod-B></mod-B> 


<script src="main.js"></script> 


<!--script--> 
</body> 
</html> 


其 中 模块 A 和 模块 B 组 件 对 应 的 目录 文件 如 下 。 


index.es 
index.html 
index.scss 


img/ 


以 上 面 这 一 个 入 口 文 件 的 index.html 源 文件 为 例 。 这 个 入 口 页 面 文 
件 index.html 中 含有 A 和 B 两 个 模块 ， 模 块 A、B 组 件 遵循 统一 的 模块 规 
范 : 每 个 组 件 都 包含 JavaScript、SCSS、HTML 文 件 和 img 目 录 。 我 们 
希望 构建 后 将 模块 A 和 模块 B 的 内 容 全 部 引用 到 页 面 上 ，CSS 和 
JavaScript 的 脚本 资源 也 经 过 压缩 编译 处 理 ， 而 且 最 后 打包 后 的 资源 引 
用 达到 最 优 预 上 线 的 状态 。 根 据 上 面 的 构建 处 理 流程 ， 我 们 将 构建 任 
务 分 成 7 个 阶段 (分 别 命名 为 buildl~build7) ， 具 体 如 下 。 


o build1 读 取 入 口 文件 阶段 。 构 建 工 具 会 读 取 index.html 源 文件 到 
一 个 字符 串 Buffer (或 者 文件 对 象 ) 中 。 


o build2 分 析 模 块 引 用 阶段 。 根 据 特 定 的 标识 〈 例 如 mod- 开 头 的 
自 定 义 标 签 ) 分 析出 页 面 字符 串 Buffer 中 含有 的 两 个 模块 A 和 
模块 B 的 引用 。 


o build3 按 照 引 用 加 载 模块 文件 阶段 。 进 入 模块 A、B 目 录 中 读 取 
模块 A 和 模块 B 包 含 的 HTML、SCSS、JavaScript 文 件 。 


build4 模 块 文件 编译 阶段 。 进 行 对 应 的 脚本 转译 (转译 的 工具 
都 是 通过 插件 完成 的 ) 和 依赖 分 析 ， 例 如 将 ECMAScript 6 十 
脚本 转译 成 ECMAScript 5 脚本 模块 引入 、 将 SCSS 文 件 预 处 理 
为 CSS 等 。 该 阶段 完成 后 ， 构 建 工 具 将 生成 编译 后 的 代码 字符 
串 Buffer。 


build5 模 块 文件 合并 阶段 。 将 所 有 JavaScript、CSS 代 码 字 符 串 
Buffer 写 入 一 个 新 的 字符 串 Buffer 中 ， 将 模块 A、B 的 HTML 字 
符 串 Buffer 插 入 index.html 的 字符 串 Buffer 中 ， 生 成 线 上 域名 路 
径 http:/www.domain.com/dist/css/main.css 和 
http:/www.domain.com/dist/js/main.js ， 将 路 径 名 插入 到 
index.html 字 符 串 Buffer 中 代替 注释 <!--style--> 和 <!--script--> 的 
人 位置， 表示 CSS 和 JavaScript 脚 本 引用 的 最 终 路 径 。 


build6 文 件 优化 处 理 阶 段 。 将 合并 后 的 JavaScript、CSS 代 码 字 
符 串 Buffer 进 行 优化 ， 例 如 去 注释 、 压 缩 等 。 或 将 CSS 引 用 的 
多 个 单 张 背景 图 合成 一 张大 图 ， 这 个 阶段 的 压缩 合并 处 理 也 
都 是 可 以 通过 不 同 插件 来 优化 完成 的 。 


build7 阶 段 。 将 优化 完成 的 字符 串 Buffer 写 入 到 配置 好 的 输出 目 

录 中 ， 将 文件 命名 为 main.js 和 main.css， 对 HTML 字符 串 Buffer 
进行 去 除 注 释 等 优化 处 理 ， 最 后 写 入 到 输出 目录 中 。 至 此 ， 
整个 构建 流程 完成 。 分 析 处 理 后 入 口 HTML 文 件 可 能 如 下 ， 而 
引用 的 CSS 和 JavaScript 文 件 都 是 转译 优化 后 的 代码 文件 。 


<!IDOCTYPE html> 
<html lang="en"> 


<head> 


<meta charset="UTF-8"> 
<title>Document</title> 
<link rel="stylesheet" 
href="http://www.domain.com/dist/css/main.css"> 
</head> 
<body> 


<div class="mod-A"> 


</div> 


<div class="mod-B"> 


</div> 
<script 
src="http://www.domain.com/dist/js/main.js"></script> 
</body> 
</html> 


处 理 的 文件 以 字符 串 Buffer 或 文件 对 象 的 形式 存在 于 整个 过 程 中 ， 
最 终生 成 文件 的 规则 一 般 是 按照 用 户 自 定 义 的 配置 来 完成 的 。 不 同 阶 
段 的 处 理 流 程 一 般 可 以 通过 第 三 方 插件 来 实现 ， 例 如 上 面 提 到 模块 化 
封装 、 依 赖 合 并 、 压 缩 优 化 、 文 件 能 入 、 路 径 蔡 换 、 生 成 资源 包 等 都 
可 以 借助 插件 来 做 必要 的 时 候 也 会 自己 编写 插件 。 


从 某 种 意义 上 来 说 ， 构 建 流程 中 代码 资源 文件 就 像 是 工厂 生产 线 

的 产品 一 样 ， 经 过 多 个 加 工 机 器 进行 处 理 加 工 ， 最 后 打包 封装 生成 想 
要 的 产品 。 早 期 也 有 通过 不 断 读 写 文件 处 理 方 式 实 现 的 构建 工具 ， 即 
一 次 处 理 就 将 文件 写 到 磁盘 的 某 个 临时 目录 下 ， 处 理 下 一 个 插 


件 时 再 从 这 个 目录 中 读 取出 来 ， 但 这 种 方式 由 于 频繁 地 对 磁盘 进行 读 
写 ， 因 此 构建 速度 较 慢 ， 目 前 已 经 很 少 使 用 了 。 


5.3.3 ”构建 工具 设计 的 问题 


通过 上 面 的 分 析 ， 我 们 对 构建 工具 的 流程 和 原理 有 了 较 直 接 的 认 
识 ， 并 可 以 使 用 基础 的 工具 搭建 自己 理想 的 构建 环境 。 那 么 在 现代 前 
端 实际 开发 中 通常 希望 构建 工具 帮 有 我 们 处 理 哪些 问题 呢 ? 


模块 分 析 引 入 


目前 前 端 开发 模式 基本 已 经 进入 组 件 化 开发 阶段 ， 组 件 化 实现 的 
方式 也 比较 多 ， 所 以 首先 希望 构建 工具 能 自动 帮 我 们 完成 对 组 件 模 块 
的 引入 和 分 析 ， 例 如 自动 分 析 require 或 import 的 模块 进行 合并 打包 。 这 
样 在 开发 过 程 中 就 可 以 专注 于 组 件 本 身 ， 而 不 用 关心 组 件 模块 引用 最 
终 是 怎么 被 构建 打包 的 。 


重点 了 解 一 下 JavaScript 组 件 模块 文件 的 依赖 分 析 过 程 ， 以 
require 的 引用 方式 为 例 。 


1. 从 入 口 模块 开始 分 析 require 遂 数 调用 依赖 。 


2. 根据 依赖 生成 JavaScript AST (Abstract Syntax Tree， 抽 象 语 
法 树 ， 是 将 JavaScript 代 码 映射 成 一 个 树 形 结构 的 JSON 对 象 树 ) 。 


3. 根据 AST 找 到 每 个 模块 的 模块 名 。 


4. 得 到 每 个 模块 的 依赖 天 系 ， 生 成 一 个 依赖 字典 。 


5. 根据 模块 化 引用 机 制 包 装 每 个 模块 ， 传 入 依赖 字典 以 及 
import 或 require 了 为 数 ， 生 成 执行 的 JavaScript 代 码 。 


模块 化 规范 支持 


目前 ， 前 端 开发 中 使 用 ECMAScript 6 十 标准 实现 的 项 目 居 多 ， 但 
大 多 数 情况 都 是 通过 构建 工具 插件 将 其 转译 成 ECMAScript 5 语法 代码 
在 浏览 器 中 运行 的 。 这 里 涉及 多 种 JavaScript 模 块 化 规范 之 间 处 理 转 换 
的 问题 ， 好 的 构建 工具 应 该 尽 可 能 支持 较 多 种 类 模块 化 规范 进行 打 
包 ， 这 样 我 们 就 不 用 考虑 模块 化 规范 不 统一 的 问题 了 。 


CSS 编 译 、 自 动 合并 图 片 


CSS 的 预 处 理 、 图 片 引 用 的 分 析 、 内 联 图 片 资 源 、 自 动 合并 雪 眉 图 
等 功能 在 一 个 理想 的 构建 工具 里 都 是 必 不 可 少 的 。 如 果 构 建 工具 能 
动 移 除 解 析 后 重复 宛 余 的 CSS 规 则 就 更 完美 了 。 


HTMIL、JavaScript、CSS 资 源 压 缩 优化 


为 了 尽 可 能 让 线 上 资源 的 体积 最 小 化 ， 发 布 到 线 上 的 文件 通常 需 

经 过 构建 工具 的 压缩 优化 处 理 ， 例 如 HTML 内 注释 和 多 余 空格 的 压 
JavaScript 的 uglify 操 作 、CSS 的 压缩 等 ， 这 些 都 是 我 们 希望 构建 工 
具 自 动 完成 的 。 


HTML 路 径 分 析 蔡 换 


在 开发 过 程 中 ， 为 了 方便 开发 调试 处 理 ， 我 们 通常 使 用 相对 路 径 
来 进行 文件 的 引用 。 但 是 项 目 开发 完成 上 线 后 ， 静 态 资 源 会 发 布 到 绝 
对 路 径 甚至 不 同 的 域名 CDN 路 径 上 ， 这 就 需要 在 上 线 前 对 文件 路 径 进 
行 蔡 换 ， 所 以 我 们 希望 构建 工具 也 能 自动 完成 这 一 工作 ， 即 提供 将 文 
件 相对 路 径 上 自动 蔡 换 成 绝对 路 径 或 线 上 CDN 路 径 的 能 力 。 


区 分 开发 和 上 线 目录 环境 


为 了 方便 开发 和 调试 ， 希 望 浏览 器 在 使 用 构建 工具 开发 时 能 加 载 
未 压缩 处 理 的 代码 文件 ， 但 是 准备 上 线 前 需要 对 文件 进行 压缩 优化 处 
理 ， 这 就 要 求 构 建 工 具 能 区 分 开发 和 线 上 环境 的 不 同 资源 。 我 们 常常 
望 能 够 在 配置 构建 任务 时 指明 开发 和 发 布 资源 目录 来 满足 不 同 场景 
下 的 需要 。 


异步 文件 打包 方案 


异步 文件 加 载 的 场景 很 常见 ， 尤 其 是 在 移动 端 ， 我 们 通常 将 首 屏 
的 内 容 优先 展示 ， 然 后 滚动 异步 加 载 后 面 的 内 容 。 为 了 保证 首 屏 加 载 
的 资源 最 小 ， 非 首 屏 的 内 容 都 希望 通过 JavaScript 来 异步 泻 染 ， 这 就 需 
要 构建 工具 能 将 非 首 屏 的 组 件 打包 成 异步 资产 ， 以 按 需 或 异步 的 方式 
加 载 。 同 时 我 们 又 不 希望 在 开发 过 程 中 太 关 注 异 步 组 件 和 同步 组 件 的 
区 别 ， 所 以 通常 将 异步 组 件 放 在 异步 的 目录 里 进行 单独 打包 或 加 入 特 
殊 的 标识 ， 不 过 也 需要 构建 工具 支持 才 行 。 


文件 目录 日 名 单 设置 


为 了 加 快 项 目 代 码 构建 的 处 理 速 度 ， 建 议 提供 一 些 配置 绕 过 不 需 
要 处 理 的 文件 目录 ， 否 则 文件 目录 较 多 的 情况 下 构建 处 理 速度 就 会 比 


较 慢 。 


除了 这 些 ， 我 们 还 可 以 配置 构建 工具 来 完成 更 多 的 事情 ， 具 体 可 
以 根据 特殊 需要 来 选择 使 用 ， 所 以 通常 构建 工具 也 应 该 是 可 以 扩展 
的 ， 通 过 配置 更 多 的 插件 来 共同 完成 项 目 自 动 化 处 理 中 的 任务 。 


这 一 节 主 要 讲解 了 构建 工具 的 工作 流程 和 原理 ， 介 绍 得 相对 比较 
理论 化 ， 希 望 大 家 结合 自己 使 用 的 构建 工具 去 理解 消化 。 对 于 构建 工 
具 的 选择 ， 读 者 可 以 比较 当下 主流 的 构建 工具 并 选择 一 个 合适 的 使 
用 。 构 建 工具 仍 在 不 断 更 新 变化 ， 但 无 论 如 何 ， 构 建 的 基本 原理 是 确 
定 的 ， 它 的 最 终 目的 仍 是 自动 化 完成 一 些 事情 ， 提 高 开发 的 效率 。 


5.4” ”前端 性 能 优化 


前 端 性 能 优化 是 一 个 很 宽泛 的 概念 ， 本 书 前 面 的 部 分 也 多 多 少 少 
提 到 一 些 前 端 优化 方法 ， 这 也 是 我 们 一 直 在 关注 的 一 件 重 要 事情 。 配 
合 各 种 方式 、 手 段 、 辅 助 系统 ， 前 端 优 化 的 最 终 目的 都 是 提升 用 户 体 
验 ， 改 善 页 面 性 能 ， 我 们 常常 竭尽 全 力 进行 前 端 页 面 优化 ， 但 却 忽略 
了 这 样 做 的 效果 和 意义 。 先 不 急于 探究 前 端 优化 具体 可 以 怎样 去 做 ， 
先 看 看 什么 是 前 端 性 能 ， 应 该 怎样 去 了 解 和 评价 前 端 页 面 的 性 能 。 


通常 前 端 性 能 可 以 认为 是 用 户 获取 所 需要 页 面 数据 或 执行 某 个 页 
面 动作 的 一 个 实时 性 指标 ， 一 般 以 用 户 和 希望 获取 数据 的 操作 到 用 户 实 


际 获得 数据 的 时 间 间 隔 来 衡量 。 例 如 用 户 希 望 获取 数据 的 操作 是 打开 
某 个 页 面 ， 那 么 这 个 操作 的 前 端 性 能 就 可 以 用 该 用 户 操 作 开 始 到 屏幕 
展示 页 面 内 容 给 用 户 的 这 段 时 间 间 隔 来 评判 。 用 户 的 等 待 延 时 可 以 分 
成 两 部 分 : 可 控 等 待 延 时 和 不 可 控 等 待 延 时 。 可 控 等 待 延 时 可 以 理解 
为 能 通过 技术 手段 和 优化 来 改进 缩短 的 部 分 ， 例 如 减 小 图 片 大 小 让 请 
求 加 载 更 快 、 减 少 HTTP 请 求 数 等 。 不 可 控 等 待 延 时 则 是 不 能 或 很 难 通 
过 前 后 端 技术 手段 来 改进 优化 的 ， 例 如 鼠标 点 击 延 时 、CPU 计 算 时 间 
延 时 、ISP (Internet Service Provider， 互 联网 服务 提供 商 ) 网 络 传输 延 
时 等 。 所 以 要 知道 的 是 ， 前 端 中 的 所 有 优化 都 是 针对 可 控 等 待 延 时 这 
部 分 来 进行 的 ， 下 面 来 了 解 一 下 如 何 获 取 和 评价 一 个 页 面 的 具体 性 
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5.4.1 “前端 性 能 测试 


获取 和 衡量 一 个 页 面 的 性 能 ， 主 要 可 以 通过 以 下 几 个 方面 : 
Performance Timing API、Profile 工 具 、 页 面 埋 点 计时 、 资 源 加 载 时 序 
分 析 。 


Performance Timing API 


Performance Timing API 是 一 个 支持 Internet Explorer 9 以 上 版 本 及 
WebKit 内 核 浏 览 器 中 用 于 记录 页 面 加 载 和 解析 过 程 中 关键 时 间 点 的 机 
制 ， 它 可 以 详细 记录 每 个 页 面 资源 从 开始 加 载 到 解析 完成 这 一 过 程 中 
具体 操作 发 生 的 时 间 点 ， 这 样 根据 开始 和 结束 时 间 戳 就 可 以 计算 出 这 
个 过 程 所 花 的 时 间 了 。 


图 5-4 为 W3C 标 准 中 Performance Timing 资 源 加 载 和 解析 过 程 记 录 各 
个 关键 点 的 示意 图 ， 浏 览 器 中 加 载 和 解析 一 个 HTML 文 件 的 详细 过 程 先 
后 经 历 unload 、redirect 、 App Cache 、 DNS 、TCP 、 Request 、 
Response、Processing、onload 几 个 阶段 ， 每 个 过 程 开 始 和 结束 的 关键 
时 间 惟 浏览 器 已 经 使 用 performance.timing 来 记录 了 ， 所 以 根据 这 个 记 
录 并 结合 简单 的 计算 ， 我 们 就 可 以 得 到 页 面 中 每 个 过 程 所 消耗 的 时 


AN 
la]。 
navigationStart 
redirectStart 
redirectEnd 
fetchStart 
domainLookupStart 
domainLookupEnd 
connectStart 
(secureConnectionStart) 
connectEnd 
requestStart 
responseStart 
responseEnd 


| A 
loadEventStart 
domComplete 
domContentLoaded 
dominteractive 
domloading 
unloadEnd 


unloadStart 


图 5-4 ”performance API 关 键 时 间 点 记录 


function performanceTest(){ 


let timing = performance.timing, 
readyStart = timing.fetchStart - timing.navigationStart, 
redirectTime = timing.redirectEnd - 


timing.redirectStart, 


appcacheTime 


timing,fetchStart， 


= timing.domainLookupStart 


unloadEventTime = timing.unloadEventEnd 


timing.unloadEventStart, 


lookupDomainTime = timing.domainLookupEnd 


timing.domainLookupStart, 


connectTime = timing.connectEnd - timing.connectStart， 


requestTime = timing.responseEnd - timing.requestSstart, 


initDomTreeTime = timing.domInteractive 


timing.responseEnd, 


domReadyTime = timing.domComplete 


timing.domInteractive, 


loadEvent 


timing.loadEventStart, 


Time = timing. loadEventEnd 


loadTime = timing.loadEventEnd - timing.navigationSstart; 


console 


console. 
console. 
console. 
console. 
console. 
console. 
console. 


console. 


console 


.10g( "准备 新 页 面 时 间 耗 B 


log('redirect 重 定向 
1og( 'Appcache 耗 时 : 


jj: ' + readystart); 
耗 时 : ' + redirectTime); 


' + appcacheTime); 


log('unload 前 文档 耗 时 : ' + unloadEventTime); 


1og('DNS 查询 耗 时 : ， 
1og('TCP 连接 耗 时 : ， 


+ lookupDomainTime); 


+ connectTime); 


log('request 请 求 耗 时 : ' + requestTime); 


1og( ' 请 求 完毕 至 DOM 加 载 : ' + initDomTreeTime); 


log(' 解 析 DOM 树 耗 时 : 


.1og('1oad 事件 耗 时 : 


' + domReadyTinme); 


' + loadEventTime); 


console.1og( 加载 时 间 耗 时 : ' + loadTime ) ; 


通过 上 面 的 时 间 戳 计算 可 以 得 到 几 个 关键 步骤 所 消耗 的 时 间 ， 对 
前 端 有 意义 的 几 个 过 程 主要 是 解析 DOM 树 耗 时 、load 事 件 耗 时 和 整个 
加 载 过 程 耗 时 等 ， 不 过 在 页 面 性 能 获取 时 我 们 可 以 尽量 获取 更 详细 的 
数据 信息 ， 以 供 后 面 分 析 。 除 了 资源 加 载 解析 的 关键 点 计时 ， 
performance 还 提供 了 一 些 其 他 方面 的 功能 ， 我 们 可 以 根据 具体 需要 进 
行 选择 使 用 。 


performance ,memory // 内 存 占用 的 具体 数据 

performance.now() // performance .now( ) 方法 返回 当前 网 页 自 
performance ,timing 到 现在 的 时 

间 ， 可 以 精确 到 微 秒 ， 用 于 更 加 精确 的 计数 。 但 实际 上 ， 目 前 网 页 性 能 通过 毫秒 来 计算 
就 足够 了 

performance.getEntries() // 获取 页 面 所 有 加 载 资源 的 performance 
timing 情况 。 浏 览 器 获取 网 页 时 ， 

会 对 网 页 中 每 一 个 对 象 (脚本 文件 、 样 式 表 、 图 片 文 件 等 ) 发 出 一 个 HTTP 请 求 。 
performance.getEntries 方法 

以 数组 形式 返回 所 有 请 求 的 时 间 统 计 信 息 

performance.navigation // performance 还 可 以 提供 用 户 行为 信息 ， 例 如 网 
络 请 求 的 类 型 和 重 定向 次 数 等 ， 

一 般 都 存放 在 performance .navigation 对 象 里 面 
performance.navigation.,redirectCount // 记录 当前 网 页 重 定向 跳 转 的 次 数 


参考 资料 : https://www.w3.org/TR/resource-timing/o 


Profile 工 具 


Performance Timing API 描 述 了 页 面 资 源 从 加 载 到 解析 各 个 阶段 的 
执行 关键 点 时 间 记 录 ， 但 是 无 法 统计 JavaScript 执 行 过 程 中 系统 资源 的 
占用 情况 。Profile 是 Chrome 和 Firefox 等 标准 浏览 器 提供 的 一 种 用 于 测 
试 页 面 脚本 运行 时 系统 内 存 和 CPU 资源 占用 情况 的 API， 以 Chrome 浏 览 
器 为 例 ， 结 合 Profile， 可 以 实现 以 下 几 个 功能 。 


1. 分 析 页 面 脚本 执行 过 程 中 最 耗资 源 的 操作 


2. 记录 页 面 脚本 执行 过 程 中 JavaScript 对 象 消 耗 的 内 存 与 堆栈 的 使 
用 情况 


3. 检测 页 面 脚 本 执行 过 程 中 CPU 占用 情况 


使 用 console.profile0) 和 console.profileEnd0 就 可 以 分 析 中 间 一 段 代 码 
执行 时 系统 的 内 存 或 CPU 资源 的 消耗 情况 ， 然 后 配合 浏览 器 的 Profile 碍 
看 比较 消耗 系统 内 存 或 CPU 资源 的 操作 ， 这 样 就 可 以 有 针对 性 地 进行 
优化 了 。 


console.profile()， 

// TO0D0S， 需 要 测试 的 页 面 逻 辑 动作 

for(let i = 0; i < 100000; i ++){ 
console.log(i * i); 


2 


console.profileEnd(); 


页 面 埋 氮 计时 


使 用 Profile 可 以 在 一 定 程度 上 帮助 我 们 分 析 页 面 的 性 能 ， 但 缺点 是 
不 够 有 灵活。 实际 项 目 中 ， 我 们 不 会 过 多 关注 页 面 内 存 或 CPU 资源 的 消 
耗 情况 ， 因 为 JavaScript 有 自动 内 存 回收 机 制 。 我 们 关注 更 多 的 是 页 面 
脚本 逻辑 执行 的 时 间 。 除 了 Performance Timing 的 关键 过 程 耗 时 计算 ， 
我 们 还 希望 检测 代码 的 具体 解析 或 执行 时 间 ， 这 就 不 能 写 很 多 的 
console.profile() 和 console.profileEnd() 来 逐 段 实 现 ， 为 了 更 加 简单 地 处 理 
这 种 情况 ， 往 往 选 择 通 过 脚本 埋 点 计时 的 方式 来 统计 每 部 分 代码 的 运 
行 时 间 。 


页 面 JavaScript 埋 点 计时 比较 容易 实现 ， 和 Performance Timing 记 录 
时 间 惟 有 点 类 似 ， 我 们 可 以 记录 JavaScript 代 码 开始 执行 的 时 间 戳 ， 后 
面 在 需要 记录 的 地 方 埋 点 记录 结束 时 的 时 间 惟 ， 最 后 通过 差 值 来 计算 
一 段 HIML 解 析 或 JavaScript 解 析 执 行 的 时 间 。 为 了 方便 操作 ， 可 以 将 
某 个 操作 开始 和 结束 的 时 间 戳 记录 到 一 个 数组 中 ， 然 后 分 析 数 组 之 间 
的 间隔 就 得 到 每 个 步骤 的 执行 时 间 ， 下 面 来 看 一 个 时 间 点 记录 和 分 析 
的 例子 。 


let timeList = []; 
function addTime(tag)t timeList.push({"tag":tag,"time":+new 


Date}); } 

addTime ("loading"); 
timeList.push({"tag":"load", "time": +new Date( )}); 
// TO0D0S，load 加 载 时 的 操作 


timeList.push({"tag":"load", "time": +new Date( )}); 


timeList.push({"tag":"process", "time": +new Date( )}); 


// TODOS，process 处 理 时 的 操作 


timeList.push({"tag":"process", "time": +new Date()}); 
parseTime(timeList); // 输出 {load: 时 间 毫 秒 数 ，process: 时 间 毫 秒 数 } 


function parseTime(time)t{ 
let timeStep = {}, 
endTime; 
for(let i = 0,1len = time.length; i < len; i ++){ 


if(!time[i]) continue; 


endTime = {}; 
for(let j = i+1; j] < len; j++ ){ 
if(time[j|] && time[il].tag == time[j].tag)t{ 
endTime.tag = time[j|].tag; 
endTime.time = time[j].time; 


time[j] = null; 


} 
if(endTime.time >= © && endTime.tag)t{ 


timeStep[endTime.tag] = endTime.time - time[i].time; 


} 


return timeStep; 


这 种 方式 常常 在 移动 端 页 面 中 使 用 ， 因 为 移动 端 浏览 器 HTML 解 析 
和 JavaScript 执 行 相对 较 慢 ， 通 常 为 了 进行 性 能 优化 ， 我 们 需要 找到 页 
面 中 执行 JavaScript 耗 时 的 操作 ， 如 果 将 关键 JavaScript 的 执行 过 程 进行 
埋 点 计时 并 上 报 ， 就 可 以 轻松 找 出 JavaScript 执 行 慢 的 地 方 ， 并 有 和 针对 
性 地 进行 优化 。 


资源 加 载 时 序 图 


我 们 还 可 以 借助 浏览 器 或 其 他 工具 的 资源 加 载 时 序 图 来 帮助 分 析 
页 面 资源 加 载 过 程 中 的 性 能 问题 。 这 种 方法 可 以 粗 粒 度 地 宏观 分 析 浏 
览 器 的 所 有 资源 文件 请 求 耗 时 和 文件 加 载 顺 序 情况 ， 如 保证 CSS 和 数据 
请 求 等 关键 性 资源 优先 加 载 ，JavaScript 文 件 和 页 面 中 非 关 键 性 图 片 等 
内 容 延 后 加 载 。 如 果 因 为 某 个 资源 的 加 载 十 分 耗 时 而 阻塞 了 页 面 的 内 
容 展 示 ， 那 就 要 着 重 考虑 。 所 以 ， 我 们 需要 通过 资源 加 载 时 序 图 来 辅 
助 分 析 页 面 上 资源 加 载 顺 序 的 问题 。 


图 5-5 为 使 用 Fiddler 获取 浏览 访 问 地 址 
http:/www.jixianqianduan.com 时 的 资源 加 载 时 序 图 。 根 据 此 图 ， 我 们 可 
以 很 直观 地 看 到 页 面 上 各 个 资产 加 载 过 程 所 需要 的 时 间 和 先后 顺序 ， 
有 利于 找 出 加 载 过 程 中 比较 耗 时 的 文件 资产 ， 帮 助 我 们 有 针对 性 地 进 
行 优化 。 


TRANSFER TIMELINE 


图 5-5 “页面 加 载 文件 资源 时 序 图 


5.4.2 ”桌面 浏览 器 前 端 优 化 策略 


通过 性 能 测速 和 分 析 ， 我 们 基本 可 以 获取 收集 到 页 面 上 大 部 分 的 
具体 性 能 数据 ， 如 何 根据 这 些 数据 采取 适当 的 方法 和 手段 对 当前 的 页 
面 进 行 优化 呢 ? 目前 来 看 ， 前 端 优化 的 策略 很 多 ， 如 YSlow (YSlow 是 
Yahoo 发 布 的 一 款 Firefox 插 件 ， 可 以 对 网 站 的 页 面 性 能 进行 分 析 ， 提 出 
对 该 页 面 性 能 优化 的 建议 ) 原则 等 ， 总 结 起 来 主要 包括 网 络 加 载 类 、 
页 面 泻 染 类 、CSS 优 化 类 、JavaScript 执 行 类 、 缓 存 类 、 图 片 类 、 架 构 
协议 类 等 几 类 ， 下 面 逐 一 介绍 。 


网 络 加 载 类 


1. 减少 HTTP 资 源 请 求 次 数 


在 前 端 页 面 中 ， 通 常 建 议 尽 可 能 合并 静态 资源 图 片 、JavaScript 或 
CSS 人 代码， 减少 页 面 请 求 数 和 资源 请 求 消耗 ， 这 样 可 以 缩短 页 面 首次 访 
问 的 用 户 等 竺 时间。 通过 构建 工具 合并 雪 鹅 图 、CSS、JavaScript 文 件 
等 都 是 为 了 减少 HITP 资 源 请 求 次 数 。 另 外 也 要 尽量 避免 重复 的 资源 ， 
防止 增加 多 余 请 求 。 


2. 减 小 HTTP 请 求 大 小 \ 


除了 减少 HTTP 资 源 请 求 次 数 ， 也 要 尽量 减 小 每 个 HTTP 请 求 的 大 
小 。 如 减少 没 必要 的 图 片 、JavaScript、CSS 及 HTML 代 码 ， 对 文件 进行 
压缩 优化 ， 或 者 使 用 gzip 压 缩 传输 内 容 等 都 可 以 用 来 减 小 文件 大 小 ， 
短 网 络 传输 等 待 时 延 。 前 面 我 们 使 用 构建 工具 来 压缩 静态 图 片 资源 L 
及 移 除 代码 中 的 注释 并 压缩 ， 目 的 都 是 为 了 减 小 HTTP 请 求 的 大 小 。 


3. 将 CSS 或 JavaScript 放 到 外 部 文件 中 ， 避 免 使 用 <style> 或 <script> 
标签 直接 引入 


在 HIML 文 件 中 引用 外 部 资源 可 以 有 效 利 用 浏览 器 的 静态 资源 组 
存 ， 但 有 时 候 在 移动 端 页 面 CSS 或 JavaScript 比 较 简 单 的 情况 下 为 了 减 
少 请 求 ， 也 会 将 CSS 或 JavaScript 直 接 写 到 HTML 里 面 ， 具 体 要 根据 CSS 
或 JavaScript 文 件 的 大 小 和 业务 的 场景 来 分 析 。 如 果 CSS 或 JavaScript 文 
件 内 容 较 多 ， 业 务 逻 辑 较 复杂 ， 建 议 放 到 外 部 文件 引入 。 


<link rel="stylesheet" href="//cdn.domain.com/path/main.css"> 


<script src="//cdn.domain.com/path/main.js"></script> 


4. 避免 页 面 中 空 的 href 和 src 


当 <link> 标 签 的 href 属 性 为 空 ， 或 <script>、<img>、<iframe> 标 签 
的 src 属 性 为 空 时 ， 浏 览 器 在 泻 染 的 过 程 中 仍 会 将 href 属 性 或 src 属 性 中 
的 空 内 容 进 行 加 载 ， 直 至 加 载 失败 ， 这 样 就 阻塞 了 页 面 中 其 他 资源 的 
下 载 进 程 ， 而 且 最 终 加 载 到 的 内 容 是 无 效 的 ， 因 此 要 尽量 避免 。 


<!- -不 推荐 - -> 
<img src="" alt="photo"> 


<a href=""> 点 击 链 接 </a> 
5. 为 HTML 指 定 Cache-Control 或 Expires 


为 HTML 内 容 设 置 Cache-Control 或 Expires 可 以 将 HTML 内 容 缓存 起 
来 ， 避 免 频 每 向 服务 器 端 发 送 请 求 。 前 面 讲 到 ， 在 页 面 Cache-Control 
或 Expires 头 部 有 效 时 ， 浏 览 器 将 直接 从 缓存 中 读 取 内 容 ， 不 向 服务 器 
端 发 送 请 求 。 


<meta http-equiv="Cache-Control" content="max-age=7200" /> 
<meta http-equiv="Expires" content="Mon, 20 Jul 2016 23:00:00 


GMT" /> 
6. 合理 设置 Etag 和 Last-Modified 


合理 设置 Etag 和 Baise Madified 风 用 浏览 器 缓存 ， 对 于 未 修改 的 文 
件 ， 静 态 资源 服务 器 会 向 浏览 器 端 返回 304， 让 浏览 器 从 缓存 中 读 取 文 
件 ， 减 少 Web 资 源 下 载 的 带宽 消耗 并 降低 服务 器 负载 。 


<meta http-equiv="last-modified" content="Mon, 03 Oct 2016 
17:45:57 GMT"/> 


页 面 每 次 重 定向 都 会 延长 页 面 内 容 返 回 的 等 待 延 时 ， 一 次 重 定向 
大 约 需 要 600 坚 秒 的 时 间 开 销 ， 为 了 保证 用 户 尽 快 看 到 页 面 内容 ， 要 尽 
量 避 免 页 面 重 定向 。 


8. 使 用 静态 资源 分 域 存放 来 增加 下 载 并 行 数 


浏览 器 在 同一 时 刻 向 同一 个 域名 请 求 文 件 的 并 行 下 载 数 是 有 限 
的 ， 因 此 可 以 利用 多 个 域名 的 主机 来 存放 不 同 的 静态 资源 ， 增 大 页 面 
加 载 时 资源 的 并 行 下 载 数 ， 缩 短 页 面 资源 加 载 的 时 间 。 通 常 根据 多 个 
域名 来 分 别 存储 JavaScript、CSS 和 图 片 文件 。 


<link rel="stylesheet" href="//cdni.domain.com/path/main.css"> 


<script src="//cdn2.domain.com/path/main.js"></script> 


9. 使 用 静态 资源 CDN 来 存储 文件 


如 果 条 件 允 许 ， 可 以 利用 CDN 网 络 加 快 同一 个 地 理 区 域内 重复 静 
态 资产 文件 的 响应 下 载 速 度 ， 缩 短 资 源 请 求 时 间 。 


10. 使 用 CDN Combo 下 载 传输 内 容 


CDN Combo 是 在 CDN 服 务 器 端 将 多 个 文件 请 求 打包 成 一 个 文件 的 
形式 来 返回 的 技术 ， 这 样 可 以 实现 HTTP 连接 传输 的 一 次 性 复 用 ， 减 少 
浏览 器 的 HTTP 请 求 数 ， 加 快 资源 下 载 速度 。 例 如 同一 个 域名 CDN 服 务 
器 上 的 ajs，b.js，c.js 就 可 以 按 如 下 方式 在 一 个 请 求 中 下 载 。 


<script src="//cdn.domain.com/path/a.js,b.js,c.js"></script> 


11. 使 用 可 缓存 的 AJAX 


对 于 返回 内 容 相同 的 请 求 ， 没 必要 每 次 都 直接 从 服务 端 拉 取 ， 合 
理 使 用 AJAX 缓 存 能 加 快 AJAX 响 应 速度 并 减轻 服务 器 压力 。 


$.ajax({ 
url: Url， 
type: 'get', 
cache: true, // 推荐 使 用 缓存 
data: {} 


success(){ 


A i 
}, 
error(){ 

XA 
1 


}); 
12. 使 用 GET 来 完成 AJAX 请 求 


使 用 XMLHttpRequest 时 ， 浏 览 器 中 的 POST 方法 发 送 请 求 首先 发 送 
文件 头 ， 然 后 发 送 HITTP 正 文 数 据 。 而 使 用 GET 时 只 发 送 头 部 ， 所 以 在 
拉 取 服务 端 数 据 时 使 用 GET 请 求 效 率 更 高 。 


$.ajax({ 
url: url, 
type: 'get',， // 推荐 使 用 get 完成 请 求 
data: {} 
success(){ 


人 


}, 
error(){ 


A 


}); 
13. 减少 Cookie 的 大 小 并 进行 Cookie 隔 离 


HTTP 请 求 通 常 默认 带 上 浏览 器 端的 Cookie 一 起 发 送 给 服务 器 ， 所 
以 在 非 必要 的 情况 下 ， 要 尽量 减少 Cookie 来 减 小 HTTP 请 求 的 大 小 。 对 
于 静态 资产 ， 尽 量 使 用 不 同 的 域名 来 存放 ， 因 为 Cookie 黑 认 是 不 能 足 
域 的 ， 这 样 就 做 到 了 不 同 域名 下 静态 资产 请 求 的 Cookie 陋 离 。 


14. 缩小 favicon.ico 并 缓存 


有 利于 favicon.ico 的 重复 加 载 ， 因 为 一 般 一 个 Web 应 用 的 favicon.ico 
是 很 少 改变 的 。 


15. 推荐 使 用 异步 JavaScript 资 源 


异步 的 JavaScript 资 源 不 会 阻塞 文档 解析 ， 所 以 允许 在 浏览 器 中 优 
先 泻 染 页 面 ， 延 后 加 载 脚本 执行 。 例 如 JavaScript 的 引用 可 以 如 下 设 
置 ， 也 可 以 使 用 模块 化 加 载 机 制 来 实现 。 


<script Src="main,js” defer></script> 


<script src="main.js" async></script> 


使 用 async 时 ， 加 载 和 泻 染 后 续 文档 元 素 的 过 程 和 main.js 的 加 载 
与 执行 是 并 行 的 。 使 用 defer 时 ， 加 载 后 续 文 档 元 素 的 过 程 和 main.js 


的 加 载 是 并 行 的 ， 但 是 main.js 的 执行 要 在 页 面 所 有 元 素 解析 完成 之 
后 才 开 始 执行 。 


， 消 除 阻 塞 泻 染 的 CSS 及 JavaScript 


对 于 页 面 中 加 载 时 间 过 长 的 CSS 或 JavaScript 文 件 ， 需 要 进行 合理 
拆 分 或 延 后 加 载 ， 保 证 关键 路 径 的 资产 能 快速 加 载 完 成 。 


17. 避免 使 用 CSS import 引 用 加 载 CSS 


CSS 中 的 @import 可 以 从 另 一 个 样式 文件 中 引入 样式 ， 但 应 该 避免 

这 种 用 法 ， 因 为 这 样 会 增加 CSS 资 源 加 载 的 关键 路 径 长 度 ， 带 有 @ 

import 的 CSS 样 式 需 要 在 CSS 文 件 串 行 解析 到 @import 时 才 会 加 载 另 外 的 
CSS 文 件 ， 大 大 延 后 CSS 泻 染 完 成 的 时 间 。 


!-- 不 推荐 - -> 
<style> 
@import "path/main.css"; 


</style> 


1-- 推荐 --> 


<link rel="stylesheet" href="//cdni.domain.com/path/main.css"> 


1. 把 CSS 资 源 引 用 放 到 HTML 文 件 顶 部 


一 般 推荐 将 所 有 CSS 资 源 尽早 指定 在 HTML 文 档 <head> 中 ， 这 样 浏 
览 器 可 以 优先 下 载 CSS 并 尽早 完成 页 面 泻 染 。 


2. JavaScript 资 源 引 用 放 到 HTML 文 件 底部 


JavaScript 资 源 放 到 HTML 文 档 底 部 可 以 防止 JavaScript 的 加 载 和 解 
析 执 行 对 页 面 泻 染 造成 阻塞 。 由 于 JavaScript 资 源 默 认 是 解析 阻塞 的 ， 
除非 被 标记 为 异步 或 者 通过 其 他 的 异步 方式 加 载 ， 否 则 会 阻塞 HTML 
DOM 解 析 和 CSS 泻 染 的 过 程 。 


3. 不 要 在 HTML 中 直接 缩放 图 片 


在 HTML 中 直接 缩放 图 片 会 导致 页 面 内 容 的 重 排 重 绘 ， 此 时 可 能 会 
使 页 面 中 的 其 他 操作 产生 卡 顿 ， 因 此 要 尽量 减少 在 页 面 中 直接 进行 图 
片 缩 放 。 


. 减少 DOM 元 素数 量 和 深度 


HTML 中 标签 元 素 越 多 ， 标 签 的 层级 越 深 ,浏览 器 解析 DOM 并 绘 
制 到 浏览 器 中 所 花 的 时 间 就 越 长 ， 所 以 应 尽 可 能 保持 DOM 元 素 简洁 和 
层级 较 少 。 


!-- 不 推荐 --> 
<div> 
<span> 
<a href="javascript: void(0);"> 
<img src="./path/photo.jpg"” alt=" 图 片 "> 
</a> 


</span> 


</div> 


<!-- 推荐 --> 
<img src="./path/photo.jpg"” alt=" 图 片 "> 


5。 尽量 避免 使 用 <table>、<iframe> 等 慢 元 素 


<table> 内 容 的 泻 染 是 将 table 的 DOM 泻 染 树 全 部 生成 完 并 一 次 性 绘 
制 到 页 面 上 的 ， 所 以 在 长 表格 泻 染 时 很 耗 性 能 ， 应 该 尽量 避免 使 用 
它 ， 可 以 考虑 使 用 列表 元 素 <ul> 人 代替。 尽量 使 用 异步 的 方式 动态 添加 
iframe， 因 为 iframe 内 资源 的 下 载 进 程 会 阻塞 父 页 面 静 态 资产 的 下 载 与 


CSS 及 HTML DOM 的 解析 。 
6. 避免 运行 耗 时 的 JavaScript 


长 时 间 运 行 的 JavaScript 会 阻塞 浏览 器 构建 DOM 树 、DOM 泻 染 树 、 
演 染 页 面 。 所 以 ， 任 何 与 页 面 初 次 泻 染 无 关 的 逻辑 功能 都 应 该 延迟 加 


入 


载 执 行 ， 这 和 JavaScript 资 源 原 的 异步 加 载 思 路 是 一 致 的 。 
7. 避免 使 用 CSS 表 达 式 或 CSS 滤 镜 


CSS 表 达 式 或 CSS 滤 镜 的 解析 演 染 速度 是 比较 慢 的 ， 在 有 其 他 解决 
方案 的 情况 下 应 该 尽量 避免 使 用 。 


// 不 推荐 
.Opacityt{ 
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); 


5.4.3 ”移动 端 浏览 器 前 端 优化 策略 


相对 于 桌面 端 浏览 器 ， 移 动 端 Web 浏 览 器 上 有 一 些 较为 明显 的 特 
点 : 设备 屏幕 较 小 、 新 特性 兼容 性 较 好 、 支 持 一 些 较 新 的 HTML5 和 
CSS3 特 性 、 需 要 与 Native 应 用 交互 等 。 但 移动 端 浏览 器 可 用 的 CPU 计 
算 资 源 和 网 络 资源 极为 有 限 ， 因 此 要 做 好 移动 端 Web 上 的 优化 往往 需要 
做 更 多 的 事情 。 首 先 ， 在 移动 端 Web 的 前 端 页 面 泻 染 中 ， 桌 面 浏览 器 端 
上 的 优化 规则 同样 适用 ， 此 外 针对 移动 端 也 要 做 一 些 极致 的 优化 来 达 
到 更 好 的 效果 。 需 要 注意 的 是 ， 并 不 是 移动 端的 优化 原则 在 桌面 浏览 
器 端 就 不 适用 ， 而 是 由 于 兼容 性 和 差异 性 的 原因 ， 一 些 优化 原则 在 移 
动 端 更 具 代 表 性 。 


网 络 加 载 类 


1. 首 屏 数据 请 求 提 前 ， 避 免 JavaScript 文 件 加 载 后 才 请 求 数据 


为 了 进一步 提升 页 面 加 载 速度 ， 可 以 考虑 将 页 面 的 数据 请 求 尽 可 
能 提前 ， 避 免 在 JavaScript 加 载 完 成 后 才 去 请 求 数据 。 通 常数 据 请 求 是 
页 面 内 容 泻 染 中 关键 路 径 最 长 的 部 分 ， 而 且 不 能 并 行 ， 所 以 如 果 能 将 
数据 请 求 提前 ， 可 以 极 大 程度 上 缩短 页 面 内 容 的 泻 染 完成 时 间 。 


2. 首 屏 加 载 和 按 需 加 载 ， 非 首 屏 内 容 滚屏 加 载 ， 保 证 首 屏 内 容 最 
小 化 


由 于 移动 端 网 络 速度 相对 较 慢 ， 网 络 资源 有 限 ， 因 此 为 了 尽快 完 
成 页 面 内 容 的 加 载 ， 需 要 保证 首 屏 加 载 资源 最 小 化 ， 非 首 屏 内 容 使 用 
滚动 的 方式 异步 加 载 。 一 般 推荐 移动 端 页 面 首 屏 数 据 展 示 延 时 最 长 不 


超过 3 秒 。 目 前 中 国联 通 3G 的 网 络 速度 为 338KB/s (2.71Mb/s) ， 所 以 
推荐 首 屏 所 有 资源 大 小 不 超过 1014KB ， 即 大 约 不 超过 1MB。 


3. 模块 化 资源 并 行 下 载 


在 移动 端 资源 加 载 中 ， 尽 量 保证 JavaScript 资 源 并 行 加 载 ， 主 要 指 
的 是 模块 化 JavaScript 资 源 的 异步 加 载 ， 例 如 AMD 的 异步 模块 ， 使 用 并 
行 的 加 载 方式 能 够 缩短 多 个 文件 资源 的 加 载 时 间 。 


4. inline 首 屏 必 备 的 CSS 和 JavaScript 


通常 为 了 在 HTML 加 载 完 成 时 能 使 浏览 器 中 有 基本 的 样式 ， 
页 面 泻 染 时 必 备 的 CSS 和 JavaScript 通 过 <script> 或 <style> 内 联 到 页 
中 ， 避 免 页 面 HTIML 载 入 完成 到 页 面 内 容 展示 这 段 过 0 
白 。 


<IDOCTYPE html> 
<html lang="en"> 
<head> 

<meta charset="UTF-8"> 

<title> 样 例 </title> 

<meta name="viewport" content="width=device-width,minimum- 

scale=1.0, 
maximum-scale=1.0,user-scalable=no"> 

<style> 

/* 必 备 的 首 屏 CSS */ 

html, bodyt{ 

margin: 0; 


padding: 0; 


background-color: #ccc; 
} 
</style> 
</head> 
<body> 
</body> 
</html> 


5. meta dns prefetch 设 置 DNS 预 解析 


设置 文件 资源 的 DNS 预 解析 ， 让 浏览 器 提前 解析 获取 静态 资产 的 
主机 IP， 避 人 免 等 到 请 求 时 才 发 起 DNS 解 析 请 求 。 通 常 在 移动 端 HTML 中 
可 以 采用 如 下 方式 完成 。 


<!-- cdn 域 名 预 解析 - -> 
<meta http-equiv="x-dns-prefetch-control" content="on"> 


<link rel="dns-prefetch" href="//cdn.domain.com"> 
6. 资源 预 加 载 


对 于 移动 端 首 屏 加 载 后 可 能 会 被 使 用 的 资源 ， 需 要 在 首 屏 完成 加 
载 后 尽快 进行 加 载 ， 保 证 在 用 户 需 要 浏览 时 已 经 加 载 完 成 ， 这 时 候 如 
果 再 去 异步 请 求 就 显得 很 慢 。 


7. 合理 利用 MTU 策 略 


通常 情况 下 ， 我 们 认为 TCP 网 络 传输 的 最 大 传输 单元 (Maximum 
Transmission Unit，MTU) 为 1500B， 即 一 个 RTT (Round-Trip Time， 
网 络 请 求 往 返 时 间 ) 内 可 以 传输 的 数据 量 最 大 为 1500 字 节 。 因 此 ,在 


前 后 端 分 离 的 开发 模式 中 ， 尽 量 保证 页 面 的 HTML 内 容 在 1KB 以 内 ， 这 
样 整个 HTML 的 内 容 请 求 就 可 以 在 一 个 RITT 内 请 求 完成 ， 最 大 限度 地 提 
高 HTML 载 入 速度 。 


缓存 类 


1. 合理 利用 浏览 器 缓存 


除了 上 面 说 到 的 使 用 Cache-Control、Expires、Etag 和 Last-Modified 
来 设置 HITTP 缓 存 外 ， 在 移动 端 还 可 以 使 用 localStorage 等 来 保存 AJAX 
返回 的 数据 ， 或 者 使 用 localStorage 保 存 CSS 或 JavaScript 静 态 资 源 内 
容 ， 实 现 移动 端的 离线 应 用 ， 尽 可 能 减少 网 络 请 求 ， 保 证 静态 资源 内 
容 的 快速 加 载 。 


2. 静态 资源 离线 方案 


对 于 移动 端 或 Hybrid 应 用 ， 可 以 设置 离线 文件 或 离线 包机 制 让 静态 
资产 请 求 从 本 地 读 取 ， 加 快 资产 载 入 速度 ， 并 实现 离线 更 新 。 关 于 这 
块 内 容 ， 我 们 会 在 后 面 的 章节 中 重点 讲解 。 


3. 尝试 使 用 AMP HTML 
AMP HTML 可 以 作为 优化 前 端 页 面 性 能 的 一 个 解决 方案 ， 使 用 
AMP Component 中 的 元 素来 代替 原始 的 页 面 元 素 进行 直接 泻 染 。 


<!-- 不 推荐 --> 
<video width="400" height="300" 
src="http://www.domain.com/videos/myvideo.mp4" 


poster="path/poster .jpg"> 


<div fallback> 
<p>Your browser doesn’t support HTML5 video</p> 
</div> 
<source type="video/mp4" src="foo.mp4"> 
<source type="video/webm" src="foo0.webm"> 


</video> 


<!-- 推荐 --> 
<amp-video width="400" height="300" 
src="http://www.domain.com/videos/myvideo.mp4" poster= 
"path/poster .jpg"> 

<div fallback> 

<p>Your browser doesn’t support HTML5 video</p> 

</div> 

<source type="video/mp4" src="foo.mp4"> 

<source type="video/webm" src="foo0.webm"> 


</amp-video> 


图 片 类 


1. 图 片 压缩 处 理 


在 移动 端 ， 通 党 要 保证 页 面 中 一 切 用 到 的 图 片 都 是 经 过 压缩 优化 
处 理 的 ， 而 不 是 以 原 图 的 形式 直接 使 用 的 ， 因 为 那样 很 消耗 流量 ， 而 
且 加 载 时 间 更 长 。 


2. 使 用 较 小 的 图 片 ， 合 理 使 用 base64 内 由 图 片 


在 页 面 使 用 的 背景 图 片 不 多 且 较 小 的 情况 下 ， 可 以 将 图 片 转化 成 
base64 编 码 髓 入 到 HTML 页 面 或 CSS 文 件 中 ， 这 样 可 以 减少 页 面 的 
HTTP 请 求 数 。 需 要 注意 的 是 ， 要 保证 图 片 较 小 ， 一 般 图 片 大 小 超过 
2KB 就 不 推荐 使 用 base64 舱 入 显示 了 。 


.Class-name { 
background-image: 

url('data:image/png;base64,iVBORwOKGgoAAAANSUNEUgAAAAoAAAALCAMAA 
ABxSsOwqAAAAYFBMVEWNxw 
USyQukxQudwQyZzvgyhxAyfwgyxzAsUHQGOUAOaJAERGAFIXwSTugyEqgtqhghQzdg 
UwQQIpOQKbuguVtQuKrAu 
Cowp2kQlheghTbQzHwQU7SwVAVgQ6TgQLLwMeKwFOemyQAAAAVE1EQVQI1y3JVRa 
AIAAFOUconXbvf5ei8HfP 
DIQQNBAAFE10iKig3SLRNNA4SP/p+NO8VCOYNfIlINWtqIkhg/TPYbCvhqdHAWRXPZ 
Sp3g3CWZVVLXC60JA3UKV 

0AaAAAAAEJFTKSUuQmCC ' ) ; 


} 
3. 使 用 更 高 压缩 比 格式 的 图 片 


使 用 具有 较 高 压缩 比 格式 的 图 片 ， 如 webp 等 。 在 同等 图 片 画 质 的 
情况 下 ， 高 压缩 比 格式 的 图 片 体积 更 小 ， 能 够 更 快 完成 文件 传输 ， 节 
省 网 络 流 量 。 


<img src="//cdn.domain.com/path/photo .webp" alt="webp 格 式 图 片 "> 


4. 图 片 懒 加 载 


为 了 保证 页 面 内 容 的 最 小 化 ， 加 速 页 面 的 泻 染 ， 尽 可 能 节省 移动 
端 网 络 流量 ， 页 面 中 的 图 片 资源 推荐 使 用 懒 加 载 实现 ， 在 页 面 滚动 时 
动态 载 入 图 片 。 


<img data-src="//cdn.domain.com/path/photo.jpg"” alt=" 懒 加 载 图 片 "> 
5. 使 用 Media Query 或 srcset 根 据 不 同 屏幕 加 载 不 同 大 小 图 片 


在 介绍 响应 式 的 章节 中 我 们 了 解 到 ， 针 对 不 同 的 移动 端 屏 幕 尺 十 

和 分 辨 率 ， 输 出 不 同 大 小 的 图 片 或 背景 图 能 保证 在 用 户 体 验 不 降低 的 

前 提 下 节省 网 络 流量 ， 加 快 部 分 机 型 的 图 片 加 载 速 度 ， 这 在 移动 端 非 
单 值得 推荐 。 


6. 使 用 iconfont 代 替 图 片 图 标 


在 页 面 中 尽 可 能 使 用 iconfont 来 代替 图 片 图 标 ， 这 样 做 的 好 处 有 以 
下 几 个 : 使 用 iconfont 体 积 较 小 ， 而 且 是 矢量 图 ， 人 
真 ; 可 以 方便 地 修改 图 片 大 小 尺寸 和 呈现 颜色 。 但 是 需要 注意 的 是 ， 
iconfont 引 用 不 同 webfont 格 式 时 的 兼容 性 写法 ， 恨 据 经 验 推荐 尽量 按照 
以 下 顺序 书写 ， 否 则 不 容易 兼容 到 所 有 的 浏览 器 上 。 


@font-face { 
font-family: iconfont; 
src: url("./iconfont.eot"); 
src: url("./iconfont.eot?#iefix") format("eot"), 
url("./iconfont.woff") format("woff"), 


url("./iconfont.ttf") format("truetype"); 


7. 定义 图 片 大 小 限制 


加 载 的 单 张 图 片 一 般 建 议 不 超过 30KB ， 避 免 大 图 片 加 载 时 间 长 而 
阻塞 页 面 其 他 资源 的 下 载 ， 因 此 推荐 在 10KB 以 内 。 如 果 用 户 上 传 的 图 
片 过 大 ， 建 议 设置 告警 系统 ， 帮 助 我 们 观察 了 解 整个 网 站 的 图 片 流量 
情况 ， 做 出 进一步 的 改善 。 


脚本 类 


1. 尽量 使 用 id 选择 器 


选择 页 面 DOM 元 素 时 尽量 使 用 id 选择 器 ， 因 为 id 选择 器 速度 最 
快 。 


2. 合理 缓存 DOM 对 象 


对 于 需要 重复 使 用 的 DOM 对 象 ， 要 优先 设置 缓存 变量 ， 避 免 每 次 
使 用 时 都 要 从 整个 DOM 树 中 重新 查找 。 


// 不 推荐 
$('#mod .active').remove('active'); 


$('#mod .not-active').addclass('active'); 


// 推荐 
let $mod = $('#mod"); 
$mod.find('.active').remove('active'); 


$mod.find('.not-active').addcClass('active'); 


3. 页 面 元 素 尽量 使 用 事件 代理 ， 避 免 直接 事件 绑 定 


使 用 事件 代理 可 以 避免 对 每 个 元 素 都 进行 绑 定 ， 并 且 可 以 避免 出 
现 内 存 泄 露 及 需要 动态 添加 元 素 的 事件 绑 定 问题 ， 所 以 尽量 不 要 直接 
使 用 事件 绑 定 。 


// 不 推荐 

$(' .btn').on('click'，function(e){ 
console.1log(this); 

}); 

// 推荐 

$('body').on('click', '.btn', function(e)t{ 
console.1log(this); 


}); 
4. 使 用 touchstart 代 替 click 


由 于 移动 端 屏幕 的 设计 ，touchstart 事 件 和 click 事 件 触发 时 间 之 间 
存在 300 毫 秒 的 延 时 ， 所 以 在 页 面 中 没有 实现 touchmove 滚 动 处 理 的 情 
况 下 ， 可 以 使 用 touchstart 事 件 来 代替 元 素 的 click 事 件 ， 加 快 页 面 点 击 
的 响应 速度 ， 提 高 用 户 体验 。 但 同时 我 们 也 要 注意 页 面 重 到 元 素 touch 
动作 的 点 击 穿 透 问题 。 


// 不 推荐 
$('body').on('click', '.btn', function(e)t{ 
console.1log(this); 


}); 


// 推荐 
$('body').on('touchstart', '.btn', function(e)t{ 


console.1og(this); 


}); 
5。 避免 touchmove、scrol 连 续 事 件 处 理 


需要 对 touchmove、scroll 这 类 可 能 连续 触发 回调 的 事件 设置 事件 节 
流 ， 例 如 设置 每 隔 16ms (60 帧 的 帧 间隔 为 16.7ms， 因 此 可 以 合理 地 设 
置 为 16ms) 才 进 行 一 次 事件 处 理 ， 避 人 免 频 繁 的 事件 调用 导致 移动 端 页 
面 卡 顿 。 


// 不 推荐 
$('.scroller').on('touchmove', '.btn', function(e){ 
console.1log(this); 


}); 


// 推荐 
$('.scroller').on('touchmove', '.btn', function(e)t{ 
let self = this; 
SetTimeout(function( ){ 
console.1log(self); 
}, 16); 
}); 


， 避免 使 用 eval 、with ， 使 用 join 代 蔡 连接 符 十 ， 推 荐 使 用 
ECMAScript 6 的 字符 串 模 板 


这 些 都 是 一 些 基础 的 安全 脚本 编写 问题 ， 尽 可 能 使 用 较 高 效率 的 
特性 来 完成 这 些 操作 ， 避 免 不 规 范 或 不 安全 的 写法 。 


7. 尽量 使 用 ECMAScript 6 十 的 特性 来 编程 


ECMAScript 6 十 一 定 程度 上 更 加 安全 高 效 ， 而 且 部 分 特性 执行 速 
度 更 快 ， 也 是 未 来 规范 的 需要 ， 所 以 推荐 使 用 ECMAScript 6 十 的 新 特 
性 来 完成 后 面 的 开发 。 


1. 使 用 Viewport 固 定 屏幕 渲染 ， 可 以 加 速 页 面 泻 染 内 容 


一 般 认 为 ， 在 移动 端 设置 Viewport 可 以 加 速 页 面 的 泻 染 ， 同 时 可 以 
避免 缩放 导致 页 面 重 排 重 绘 。 在 移动 端 固定 Viewport 设 置 的 方法 如 下 。 
<!-- 设置 viewport 不 缩放 --> 
<meta name="viewport" content="width=device-width, initial- 


scale=1.0, maximum-scale=1.0, 


user-scalable=no"> 
2. 避免 各 种 形式 重 排 重 绘 


页 面 的 重 排 重 绘 很 耗 性 能 ， 所 以 一 定 要 尽 可 能 减少 页 面 的 重 排 重 
绘 ， 例 如 页 面 图 片 大 小 变化 、 元 素 位 置 变 化 等 这 些 情况 都 会 导致 重 排 
重 绘 。 


3. 使 用 CSS3 动 画 ， 开 启 GPU 加 速 


使 用 CSS3 动 画 时 可 以 设置 transform: translateZ (0) 来 开启 移动 设备 
浏览 器 的 GPU 图 形 处 理 加 速 ， 让 动画 过 程 更 加 流畅 。 


-webkit-transform: translatez(0); 
-ms-transform: translatez(0); 
-0-transform: translatez(0); 


transform: translatez(0); 
4. 合理 使 用 Canvas 和 requestAnimationFrame 


选择 Canvas 或 requestAnimationFrame 等 更 高 效 的 动画 实现 方式 ， 尽 
量 避 免 使 用 setTimeout、setInterval 等 方式 来 直接 处 理 连续 动画 。 


5. SVG 代替 图 片 


部 分 情况 下 可 以 考虑 使 用 SVG 代替 图 片 实 现 动画 ， 因 为 使 用 SVG 
格式 内 容 更 小 ， 而 且 SVG DOM 结 构 方便 调整 。 


6. 不 滥用 float 


在 DOM 泻 染 树 生 成 后 的 布局 泻 染 阶段 ， 使 用 float 的 元 素 布局 计算 
比较 耗 性 能 ， 所 以 尽量 减少 float 的 使 用 ， 推 荐 使 用 固定 布局 或 flex-box 
弹性 布局 的 方式 来 实现 页 面 元 素 布局 。 


7. 不 滥用 web 字 体 或 过 多 font-size 声 明 


过 多 的 font-size 声 明 会 增加 字体 的 大 小 计算 ， 而 且 也 没有 必要 的 。 


架构 协议 类 


1. 尝试 使 用 SPDY 和 HTTP 2 


在 条 件 允 许 的 情况 下 可 以 考虑 使 用 SPDY 协 议 来 进行 文件 资源 传 
输 ， 利 用 连接 复 用 加 快 传输 过 程 ， 缩 短 资源 加 载 时 间 。HTTP 2 在 未 来 
也 是 可 以 考虑 尝试 的 。 


2. 使 用 后 端 数据 泻 染 


使 用 后 端 效 据 泻 染 的 方式 可 以 加 快 页 面 内 容 的 泻 染 展 示 ， 避 免 空 
白 页 面 的 出 现 ， 同 时 可 以 解决 移动 端 页 面 SEO 的 问题 。 如 果 条 件 允 
许 ， 后 端 数据 泻 染 是 一 个 很 不 错 的 实践 思路 。 后 面 的 章节 会 详细 介绍 
后 端 数据 泻 染 的 相关 内 容 。 


3. 使 用 Native View 人 代替 DOM 的 性 能 劣势 


可 以 尝试 使 用 Native View 的 MNV 米 开发 模式 来 避免 HTML DOM 性 
能 慢 的 问题 ， 目 前 使 用 MNV 六 的 开发 模式 已 经 可 以 将 页 面 内 容 泻 染 体 
验 做 到 接近 客户 端 Native 应 用 的 体验 了 。 


关于 页 面 优化 的 常用 技术 手段 和 思路 主要 包括 以 上 这 些 ， 尽 管 列 
举 出 很 多 ,但 仍 可 能 有 少数 遗漏 ， 可 见 前 端 性 能 优化 不 是 一 件 简 简单 
单 的 事情 ， 其 涉及 的 内 容 很 多 。 大 家 可 以 根据 实际 情况 将 这 些 方法 应 
用 到 自己 的 项 目 当 中 ， 要 想 全 部 做 到 几乎 是 不 可 能 的 ， 但 做 到 用 户 可 
接受 的 原则 还 是 很 容易 实现 的 。 


世界 上 没有 十 全 十 美的 事情 ， 在 我 们 做 到 了 极致 优化 的 同时 也 付 
出 了 很 大 的 代价 ， 这 也 是 前 端 优化 的 一 个 问题 。 理 论 上 这 些 优 化 都 是 
可 以 实现 的 ， 但 是 作为 工程 师 我 们 也 要 明日 懂得 权衡 。 优 化 提升 了 用 
户 体 验 ， 使 数据 加 载 更 快 ， 但 是 项 目 代 码 却 可 能 打 乱 ， 异 步 内 容 要 拆 
分 出 来 ， 首 屏 的 一 个 雪 腰 图 可 能 要 分 成 两 个 ， 页 面 项 目 代 码 维护 成 本 
成 倍增 加 ， 项 目 结构 也 可 能 变 得 混乱 。 所 以 前 期 在 设计 构建 、 组 件 的 


解决 方案 时 要 解决 好 异步 的 自动 处 理 问 题 。 任 何 一 部 分 优化 都 可 以 做 
得 很 深入 ， 但 不 一 定 都 值得 ， 在 优化 的 同时 也 要 尽量 考虑 性 价 比 ， 这 
才 是 我 们 作为 一 名 前 端 工 程 师 处 理 前 端 优化 时 应 该 具有 的 正确 思维 。 


5.5 ”前端 用 户 数 据 分 析 


在 现代 互联 网 产品 的 开发 迭代 中 ， 对 前 端 用 户 数 据 的 统计 分 析 严 
重 影响 着 最 终 产品 的 成 败 。 谈 到 前 端 数据 ， 涉 及 的 方面 就 比较 广 了 。 
网 站 用 户 数据 统计 分 析 通 常 可 以 反映 出 网 站 的 用 户 规模 、 用 户 使 用 习 
惯 、 用 户 的 内 容 偏 好 等 ， 了 解 了 这 些 就 能 帮助 我 们 调整 产品 策略 、 改 
进 产品 需求 、 提 高 产品 质量 ， 除 此 之 外 用 户 数 据 的 统计 甚至 也 会 直接 
和 广告 收入 相关 联 ， 那 么 这 一 节 我 们 就 来 总 结 一 下 与 前 端 用 户 数 据 相 
天 的 内 容 。 


5.5.1 用户 访问 统计 


先 来 看 看 用 户 的 访问 统计 ， 通 常 页 面 上 用 户 访问 统计 主要 包括 PV 
(Page View) 、UV (Uniqgue Visitor) 、VV (Visit View) 、IP (访问 
站 点 的 不 同 IP 数 ) 等 。PV 一 般 指 在 一 天 时 间 之 内 页 面 被 所 有 用 户 访问 
的 总 次 数 ， 即 每 一 次 页 面 刷新 都 会 增加 一 次 PV; UV 是 指 在 一 天 时 间 之 
访问 内 页 的 不 同 用 户 个 数 ， 和 PV 不 同 的 是 ， 如 果 一 个 页 面 在 同一 天 内 
被 某 个 相同 用 户 多 次 访问 ， 只 计算 一 次 UV; VV 是 统计 网 站 被 用 户 访 
问 次 数 的 参考 数据 ， 通 常用 户 从 进入 网 站 到 最 终 离开 该 网 站 的 整个 过 
程 只 算 一 次 VV;，IP 则 表示 一 天 时 间 之 内 访问 网 站 的 不 重复 IP 数 ， 一 天 
时 间 内 相同 IP 地 址 多 次 访问 同一 个 网 站 只 计算 一 次 。 


PV 


PV 作为 单个 页 面 的 统计 量 参数 ， 通 常用 来 统计 获取 关键 入 口 页 面 
或 临时 推广 性 页 面 的 访问 量 或 推广 效果 ， 由 于 PV 的 统计 一 般 是 不 做 任 
何 条 件 限 制 的 ， 可 以 人 为 地 刷新 来 提升 统计 量 ， 所 以 单纯 靠 PV 是 无 法 
反应 页 面 被 用 户 访问 的 具体 情况 的 。 


UV 


UV 则 可 以 认为 是 前 端 页 面 统计 中 一 个 最 有 价值 的 统计 指标 ， 因 为 
其 直接 反应 页 面 的 访问 用 户 数 。 目 前 有 较 多 站 点 的 UV 是 按照 一 天 之 内 
访问 目标 页 面 的 IP 数 来 计算 的 ， 因 此 我 们 也 可 以 根据 UV 来 统计 站 点 的 
周 活跃 用 户 量 和 月 活跃 用 户 量 。 严 格 来 讲 ， 根 据 一 天 时 间 内 访问 目标 
页 面 的 IP 数 来 计算 UV 是 不 严谨 的 ， 因 为 在 办 公 区 或 校园 局 域 网 的 情况 
下 ， 多 个 用 户 访问 互联 网 网 站 的 耳 可 能 是 同一 个 ， 但 实际 上 的 访问 用 
户 却 有 很 多 。 所 以 为 了 得 到 更 加 准确 的 结果 ， 除 了 根据 卫 ， 还 需要 结 
合 其 他 的 辅助 信息 来 识别 统计 不 同 用 户 的 UV， 这 里 介绍 两 种 常用 的 方 
式 。 


o 根据 浏览 器 Cookie 和 IP 统 计 。 在 目标 页 面 每 次 打开 时 向 浏览 
中 写 入 唯一 的 某 个 Cookie 信 息 ， 再 结合 IP 一 起 上 报 统计 ， 就 可 
以 精确 统计 出 一 天 时 间 内 访问 页 面 的 用 户 数 。 存 在 的 问题 
是 ， 如 果 用 户 手 动 清除 了 Cookie 再 进入 访问 ， 页 面 被 重新 访 
问 时 就 只 能 算 第 二 次 。 


o 结合 用 户 浏 览 器 标识 userAgent 和 了 统计 。 由 于 使 用 Cookie 统 计 
存在 可 能 被 手动 清除 的 问题 ， 所 以 推荐 结合 浏览 器 标识 


userAgent 来 统计 。 这 样 可 以 在 一 定 程度 上 区 分 同 IP 下 的 不 同 
用 户 ， 但 也 不 完全 准确 ，IP 和 浏览 器 标识 userAgent 相 同 的 情 
况 也 很 常见 ， 但 仍 却 只 能 计算 一 次 。 


由 此 可 见 ， 虽 然 UV 是 网 站 统计 的 一 个 很 重要 的 统计 量 ， 但 一 般 情 
况 下 是 无 法 用 于 精确 统计 的 ， 所 以 通常 需要 结合 PV、UV 来 一 起 分 析 网 
站 被 用 户 访 间 的 情况 。 此 外 ， 我 们 还 可 以 对 站 点 一 天 的 新 访客 数 、 新 
访客 比率 等 进行 统计 ， 计 算 第 一 次 访问 网 站 的 新 用 户 数 和 比例 ， 这 对 
判断 网 站 用 户 增 长 也 是 很 有 意义 的 。 


VV 

PV 和 UV 更 多 是 针对 单 页 面 进行 的 统计 ， 而 VV 则 是 用 户 访 问 整个 
网 站 的 统计 指标 。 例 如 用 户 打 开 站 点 ， 并 在 内 部 做 了 多 次 跳 转 操 作 ， 
最 后 关闭 该 网 站 所 有 的 页 面 ， 即 为 一 次 VV。 

IP 

IP 是 一 天 时 间 内 访问 网 页 或 网 站 的 独立 IP 数 ， 一 般 服务 器 端 可 以 直 


接 获 取 用 户 访问 网 站 时 的 独立 IP， 统 计 也 比较 容易 处 理 。 需 要 注意 的 
是 ， 我 们 要 理解 IP 统 计 与 UV 统计 的 区 别 和 联系 。 


5.5.2 “用户 行为 分 析 


对 于 较 小 的 项 目 团 队 来 说 ， 或 许 得 到 页 面 或 网 站 的 PV、UV、 
VV、IP 这 些 基 本 的 统计 数据 就 可 以 了 。 其 实 不 然 ， 相 对 于 访问 量 的 统 


计 ， 用 户 行为 分 析 才 是 更 加 直接 反映 网 页 内 容 是 否 受用 户 喜 欢 或 满足 
用 户 需求 的 一 个 重要 标准 ， 用 户 在 页 面 上 操作 的 行为 有 很 多 种 ， 每 种 
操作 都 可 能 对 应 页 面 上 不 同 的 展示 内 容 。 如 果 我 们 能 知道 用 户 浏览 
标 页面 时 所 有 的 行为 操作 ， 一 定 程度 上 就 可 以 知道 用 户 对 页 面 的 哪些 
内 容 感 兴趣 ， 对 哪些 内 容 不 感 兴趣 ， 这 对 产品 内 容 的 调整 和 改进 是 很 

意义 的 。 一 般 用 于 分 析 用 户 行为 的 参数 指标 主要 包括 : 页 面 点 击 
量 、 用 户 点 击 流 、 用 户 访问 路 径 、 有 用户 点 击 热力 图 、 用 户 转 换 率 、 用 
尸 访 问 时 长 分 析 和 用 户 访 问 内 容 分 析 等 ， 下 面 我 们 来 逐一 分 析 。 


页 面 操 击 量 


页 面 点 击 量 用 来 统计 用 户 对 于 页 面 某 个 可 点 击 或 可 操作 区 域 的 点 
击 或 操作 次 数 。 以 点 击 的 情况 为 例 ， 统 计 页 面 上 某 个 按钮 被 点 击 的 次 
效 就 可 以 通过 该 方法 来 计算 ， 这 样 通过 统计 的 结果 可 以 分 析出 页 面 上 
哪些 按钮 对 应 的 内 容 是 用 户 可 能 感 兴趣 的 。 


用 户 点 击 流 分 析 


点 击 流 用 来 统计 用 户 在 页 面 中 发 生 点 击 或 操作 动作 的 顺序 ， 可 以 
反映 用 户 在 页 面 上 的 操作 行为 。 所 以 统计 上 报时 需要 在 浏览 器 上 先 保 
存 记 录用 户 的 操作 顺序 ,例如 在 关键 的 按钮 中 埋 点 ， 点 击 时 向 
localStorage 中 记录 点 击 或 操作 行为 的 唯一 id， 在 用 户 一 次 VV 结束 或 在 
下 一 次 VV 开始 时 进行 点 击 流 上 报 ， 然 后 通过 后 台 归 并 统计 分 析 。 


用 户 访问 路 径 分 析 


用 尸 访问 路 径 和 用 户 点 击 流 有 点 类 似 ， 不 过 用 户 访 问 路 径 不 针对 
用 户 的 可 点 击 或 操作 区 域 埋 点 ， 而 是 针对 每 个 页 面 埋 点 记录 用 户 访问 
不 同 页 面 的 路 径 。 上 报信 息 的 方法 和 用 户 点 击 流 上 报 相同 ， 常 常 也 是 
在 一 次 VV 结束 或 下 一 次 VV 开始 时 上 报 用 户 的 访问 路 径 。 


以 图 5-6 所 示 的 某 电 影 票 的 购买 流程 为 例 ， 页 面 首页 、 列 表 页 、 详 
情 页 、 影 评 页 、 购 票 页 、 购 票 完 成 页 对 应 的 埋 点 标识 分 别 为 A、B、 
C、D、E、F， 某 用 户 进入 首页 后 选择 最 近 上 映 的 电影 列表 ， 查 看 某 个 
电影 介绍 和 影评 ， 然 后 选择 购 票 ， 购 票 成 功 后 又 返回 首页 并 退出 ， 那 
么 我 们 可 以 记录 该 用 户 这 次 VV 的 访问 路 径 为 A-B-C-D-E-F-A， 将 该 路 
径 存 入 localStorage 中 ， 在 VV 结束 前 或 下 一 次 VV 开始 时 将 用 户 访问 路 
径 字 符 串 上 报到 服务 器 。 再 结合 点 击 流 路 径 ， 就 可 以 基本 分 析出 用 户 
这 次 访问 过 程 中 所 有 点 击 的 操作 和 访问 的 页 面 路 径 了 。 


购 票 页 E 


图 5-6 用户 点 击 购 票 流程 


用 户 点 击 热力 图 


用 户 点 击 热力 图 是 为 了 统计 用 户 的 点 击 或 操作 发 生 在 整个 页 面 哪 
些 区 域 位 置 的 一 种 分 析 方 法 ， 一 般 是 统计 用 户 操作 习惯 和 页 面 某 些 区 
域内 容 是 否 受用 户 关 注 的 一 种 方式 。 图 5-7 为 google 某 个 关键 词 的 用 户 
点 击 搜索 结果 热力 图 ， 从 图 中 可 以 分 析出 ， 搜 索 结 果 中 左上 方 的 结果 
更 容易 被 用 户 点 击 ， 所 以 这 些 地 方 的 搜索 结果 通常 是 更 具有 价值 的 。 


图 5-7 页 面 点 击 热力 图 示例 


这 种 统计 方法 获取 上 报 点 的 方式 主要 是 捕获 鼠标 事件 在 屏幕 中 的 
坐标 位 置 进行 上 报 ， 然 后 在 服务 端 进行 计算 归 类 分 析 并 绘图 。 通 过 如 
下 代码 可 以 简单 地 获取 点 击 事件 在 页 面 中 的 位 置 并 进行 上 报 。 


$(document).on('click', 'body', function(e)t{ 


report(e.pageX，e.pageY); // e.pageX 和 pageY 为 相对 于 整个 页 面 


的 坐标 
}); 


用 户 转化 率 与 导 流 转化 率 


对 用 户 转 化 率 的 分 析 一 般 在 一 些 临 时 推广 页 面 或 拉 取 新 用 户 宣传 
页 面 上 比较 常用 ， 这 里 统计 也 很 简单 ， 例 如 要 统计 某 个 新 产品 推广 页 
面 的 用 户 转 化 率 ， 通 过 计算 经 过 该 页 面 注 册 的 用 户 数 相对 于 页 面 的 PV 
比例 就 可 以 得 出 。 


用 户 转 化 率 == 通 过 该 页 面 注册 的 用 户 数 了 页面 PV 


相对 来 说 ， 用 尸 转化 率 分 析 的 应 用 场景 比较 单一 。 还 有 另 一 种 导 
流 的 页 面 统计 分 析 和 该 页 面 的 功能 类 似 ， 不 过 其 作用 是 将 某 个 页 面 的 
用 户 访问 流量 引导 到 另 一 个 页 面 中 ， 导 流转 化 率 可 以 用 通过 源 页 面 导 
入 的 页 面 访问 PV 相 对 于 源 页 面 的 总 PV 比 例 来 表示 。 


导 流 转化 率 三 通过 产 页 面 导 入 的 页 面 访问 PV 二 源 页 面 PV 

本 质 上 ， 关 键 的 统计 分 析 仍 是 对 现 有 页 面 访问 量 进行 对 比 和 计算 
而 得 出 的 ， 并 不 是 统计 出 来 的 。 

用 户 访问 时 长 、 内 容 分 析 


用 户 访 问 时 长 和 内 容 分 析 则 是 统计 分 析 用 户 在 某 些 关键 内 容 页 面 
的 停留 时 间 ， 来 判断 用 户 对 该 页 面 的 内 容 是 否 感 兴 趣 ， 从 而 分 析出 用 
户 对 网 站 可 能 感 兴趣 的 内 容 ， 方 便 以 后 精确 地 向 该 用 户 推荐 他 们 感 兴 
趣 的 内 容 。 


5.5.3 ”前 端 日 志 上 报 


接触 过 后 端 开发 的 人 可 能 知道 ， 一 般 在 程序 运行 出 现 异常 时 可 以 
通过 写 服 务 器 日 志 的 方式 来 记录 错误 的 信息 ， 然 后 下 载 服务 器 日 志 打 
开 查 看 是 哪里 的 问题 并 进行 修复 。 看 似 完美 ， 但 是 如 果 是 前 端 页 面 运 
行 出 现 了 问题 ， 我 们 却 不 能 打开 用 户 浏 览 器 的 控制 台 记 录 来 查看 代码 
中 到 底 出 现 了 什么 错误 。 


一 般 情况 下 ， 在 前 端 开发 中 ， 前 端 工 程 师 按照 需求 完成 页 面 开 
发 ， 通 过 产品 体验 确认 和 测试 ， 页 面 融 可 以 上 线 了 。 但 不 乎 的 是 ， 产 
品 很 快 就 收 到 了 用 户 的 投诉 。 用 户 反 映 页 面 点 击 按钮 没 反 应 而 且 能 
现 ， 我们 试 了 一 下 却 一 切 正 常 ， 于 是 追问 用 户 所 用 的 环境 ， 最 后 结论 
是 用 户 使 用 了 一 个 非常 小 众 的 浏览 器 打开 页 面 ， 因 为 该 浏览 器 不 支持 
某 个 特性 ， 因 此 页 面 报错 ， 整 个 页 面 停止 响应 。 在 这 种 情况 下 ， 用 户 
有 反馈 的 投诉 花 挤 了 我 们 很 多 时 间 去 定位 问题 ， 然 而 这 并 不 是 最 可 怕 
的 ， 更 让 我 们 担忧 的 是 更 多 的 用 户 遇 到 这 种 场景 后 便 会 直接 抛弃 这 个 
有 问题 的 “垃圾 产品 ”?。 这 个 问题 唯一 的 解决 办 法 就 是 在 尽量 少 的 用 户 
遇 到 这 样 的 场景 时 就 把 问题 即时 修复 掉 ， 保 证 尽量 多 的 用 户 可 以 正常 
使 用 。 首 先 我 们 需要 在 少数 用 户 使 用 产品 出 错时 知道 有 用 户 出 错 ， 而 
且 尽 量 定位 到 是 什么 错误 。 由 于 用 户 的 运行 环境 是 在 浏览 器 端的 ， 因 
此 可 以 在 前 端 页面 脚 本 执行 出 错时 将 错误 信息 上 传 到 服务 器 ， 然 后 打 
开 服 务 器 收集 的 错误 信息 进行 分 析 来 改进 产品 的 质量 。 要 实现 这 个 过 
程 ， 我 们 必须 考虑 下 面 几 个 问题 。 


怎样 获取 错误 日 志 


浏览 器 提供 了 try...catch 和 window.onerror 的 两 种 机 制 来 帮助 我 们 获 
取 用 户 页 面 的 脚本 错误 信息 。 


一 般 来 说 ， 使 用 try...catch 可 以 捕捉 前 端 JavaScript 的 运行 时 错误 ， 
同时 拿 到 出 错 的 信息 ， 例 如 错误 信息 描述 、 堆 栈 、 行 号 、 列 号 、 具 体 
的 出 错 文 件 信息 等 。 我 们 也 可 以 在 这 个 阶段 将 用 户 浏览 器 信息 等 静态 
内 容 一 起 记录 下 来 ， 快 速 地 定位 问题 发 生 的 原因 。 需 要 注意 的 是 ， 
try.…catch 无 法 捕捉 到 语法 错误 ， 只 能 在 单一 的 作用 域内 有 效 捕获 错误 
信息 ， 如 果 是 异步 水 数 里 面 的 内 容 ， 就 需要 把 function 孙 数 块 内 容 全 部 
加 入 到 try...catch 中 执行 。 


try{ 
// 单一 作用 域 try.. .catch 可 以 捕获 错误 信息 并 进行 处 理 
console.1og(obj ) ; 

}catch(e){ 


console.1og(e); // 处 理 异常 ，ReferenceError: obj is not defined 


上 
try{ 
// 不 同 作 用 域 不 能 捕获 到 错误 信息 
setTimeout(function() { 
console.10g(obj); // 直接 报错 ， 不 经 过 catch 处 理 
}, 200); 
}catch(e)t{ 
console.1log(e); 


// 同一 个 作用 域 下 能 捕获 到 错误 信息 


setTimeout(function() { 


tryt{ 
// 当前 作用 域 try.. .catch 可 以 捕获 错误 信息 并 进行 处 理 
console.1o0g(obj); 
}catch(e)t{ 
console.1og(e); // 处 理 异常 ，ReferenceError: obj is not 
defined 
} 
}, 200); 


在 上 面 的 这 个 例子 中 ，try...catch 无 法 获取 异步 函数 setTimeonut 或 其 
他 作用 域 中 的 错误 信息 ， 这 样 就 只 能 在 每 个 函数 里 面 添 加 try...catch 
了 。 相 比 之 下 ，window.onerror 的 方法 可 以 在 任何 执行 上 下 文中 执行 ， 
如 果 给 window 对 象 增加 一 个 错误 处 理 遂 数 ， 便 既 能 处 理 捕获 错误 又 能 
保持 代码 的 优雅 性 了 。window.onerror 一 般 用 于 捕捉 脚本 语法 错误 和 运 
行 时 错误 ， 可 以 获得 出 错 的 文件 信息 ， 如 出 错 信 息 、 出 错 文件 、 行 号 
等 ， 当 前 页 面 执行 的 所 有 JavaScript 脚 本 出 错 都 会 被 捕捉 到 。 


window.onerror = function (msg, url, line)t{ 
// 可 以 捕获 异步 函数 中 的 错误 信息 并 进行 处 理 ， 提 示 Script error， 
console,1og(msg);  ”// 获取 错误 信息 
console.1log(url);  // 获取 出 错 的 文件 路 径 
console.10g(line); // 获取 错误 出 错 的 行 数 
}; 


setTimeout(function() { 
console.1log(obj);  // 可 以 被 捕获 到 ， 并 在 onerror 中 处 理 
}, 200); 


然而 ， 使 用 onerror 要 注意 ， 在 不 同 浏览 器 中 实现 遂 数 处 理 返 回 的 
异常 对 象 是 不 相同 的 ， 而 且 如 果 报 错 的 JavaScript 和 HTML 不 在 同一 个 
域名 下 ， 错 误 时 window.onerror 中 的 errorMsg 全 部 为 script error 而 不 是 具 
体 的 错误 描述 信息 ， 此 时 需要 添加 JavaScript 脚 本 的 跨 域 设置 。 


<script src="//www.domain.com/main.js" crossorigin></script> 


如 果 服 务 器 因为 一 些 原 因 不 能 设置 跨 域 或 设置 起 来 比较 麻烦 ， 那 
就 只 能 在 每 个 引用 的 文件 里 添加 try...catch 进 行 处 理 。 


虽然 使 用 window.onerror 可 以 获取 页 面 的 出 错 信息 、 出 错 文 件 和 行 
号 ， 但 是 window.onerror 有 跨 域 限制 ， 如 果 需 要 获取 错误 发 生 的 具体 描 
述 、 堆 栈 内 容 、 行 号 、 列 号 和 具体 的 出 错 文件 等 详细 日 志 ， 就 必须 使 
用 try...catch， 但 是 try...catch 又 不 能 在 多 个 作用 域 中 统一 处 理 错误 。 


盏 运 的 是 ， 我 们 可 以 对 前 端 脚 本 中 常用 的 异步 方法 入 口 遂 数 或 模 
块 引用 的 入 口 方法 统一 使 用 try...catch 进 行 一 层 封装 ， 这 样 就 可 以 使 用 
try...catch 捕 获 每 个 引用 模块 作用 域 下 的 主要 错误 信息 了 。 例 如 我 们 就 
可 以 对 setTimeout 国 数 用 如 下 方式 进行 封装 并 捕获 错误 信息 。 


// 对 setTimeout 实现 函数 进行 包装 
window.setTimeoutTry= function(fn, time) { 
let args = arguments,; 
let _fn = function() { 
try { 
return fn.apply(this，args); // 将 函数 参数 用 
try...catch 包 右 
} catch (e) { 


console.1log(e); 


} 

return window['setTimeout'](_fn, time); 
} 
try { 


setTimeoutTry(function() { 
obj // 这 获取 错误 信息 ，ReferenceError: obj is not defined 
}, 300); 
} catch (e) { 


console.1log(e); 


我 们 可 以 对 不 同 作 用 域 的 setTimeout 参 数 函 数 的 引入 方式 使 用 try.…. 
catch 进 行 封装 ， 让 try...catch 能 捕获 到 setTimeout 脚 本 中 的 错误 并 使 用 
setTimeoutTry 浆 数 来 代替 。 对 于 异步 引入 模块 定义 水 数 require 或 define 
也 可 以 进行 类 似 的 封装 ， 这 样 就 可 以 获取 到 不 同 模块 里 面 作 用 域 的 错 
误 信 息 了 。 因 此 ， 这 里 捕获 错误 的 方式 可 以 根据 具体 的 条 件 和 场景 灵 
活 选 择 ， 在 没有 特别 限制 的 情况 下 ， 使 用 window.onerror 是 比较 高 效 、 
便捷 的 。 


怎样 将 错误 信息 上 传 到 服务 器 


如 果 捕 获 到 了 具体 的 错误 或 栈 信息 ， 就 可 以 将 错误 信息 进行 上 报 
了 ， 如 出 错 信 息 、 错 误 行 号 、 列 号 、 用 户 浏览 器 信息 等 ， 通 过 创建 
HTTP 请 求 的 方式 即 可 将 它们 发 送 到 日 志 收 集 服务 器 ， 这 些 对 于 迅速 定 
位 和 解决 问题 是 大 有 神 益 的 。 当 然 错 误 信息 上 报 设计 时 需要 注意 一 


所 : 页 面 的 访问 量 可 能 很 大 ， 如 果 到 达 百 万 级 、 于 万 级 ， 那 么 就 需要 
按照 一 定 的 条 件 上 报 ， 例 如 根据 一 定 的 概率 进行 上 报 ， 否 则 大 量 的 错 
误 信息 上 报请 求 会 占用 日 志 收 集 服务 器 的 很 多 资源 和 流量 。 


怎样 通过 高 效 的 方式 来 找到 问题 


为 了 方便 查看 收集 到 的 这 些 信息 ， 我 们 通常 可 以 建立 一 个 简单 的 
内 容 管 理 系 统 (Content Management System ，CMS) 来 管理 查看 错误 
日 志 ， 对 同一 类 型 的 错误 做 归并 统计 ， 也 可 以 建立 错误 量 实时 统计 来 
查看 错误 量 的 即时 变化 情况 。 当 某 个 版 本 发 布 后 ， 如 果 收 到 的 错误 量 
明显 增加 ， 就 需要 格外 注意 。 另 外 一 点 要 注意 的 是 ， 上 报错 误 信 息 机 
制 是 用 来 辅助 产品 质量 改进 的 ， 不 能 因为 在 页 面 中 添加 了 错误 信息 收 
集 和 上 报 而 影响 了 原 有 的 业务 模块 功能 。 


文件 加 载 失 败 监控 


如 果 要 进一步 完善 地 检测 页 面 的 异常 信息 ， 可 以 尝试 对 静态 资源 
文件 加 载 失败 的 情况 进行 监控 。 例 如 在 CDN 网 络 中 ， 可 能 因为 部 分 机 
器 故障 ， 导 致 用 户 加 载 不 到 <img>、<script> 等 静态 资源 ， 但 是 开发 者 
不 一 定 能 复 现 ， 而 且 无 法 第 一 时 间 知 道 静 态 资产 加 载 失 败 了 。 这 种 情 
况 下 这 就 需要 在 页 面 上 自动 捕获 文件 加 载 失 败 的 异常 来 进行 处 理 ， 可 
以 对 <img> 或 <script> 标 签 元 素 的 readyChange 进 行 是 否 加 载 成 功 的 判 
上 断 。 不 笠 的 是 ， 只 有 部 分 下 浏览 右 支 持 <img> 或 <script> 的 readyState， 
因此 一 般 还 需要 结合 其 他 方式 ， 如 onload， 针 对 不 同 浏览 器 分 开 处 理 。 


通过 这 种 方法 仅仅 是 判断 了 文件 或 脚本 加 载 成 功 的 情况 ， 我 们 还 
需要 指定 一 个 文件 加 载 的 列表 ， 在 一 段 时 间 后 将 页 面 文件 加 载 的 结果 
对 象 上 报 给 服务 器 端 来 统计 不 同文 件 的 具体 加 载 情况 。 


// 页 面 需 要 加 载 的 三 个 script 脚本 资源 


let Scripts = [script1, script2, script3]; 


// 三 个 script 加 载 的 初始 状态 
let loaded = { 
[script1]: false, 
[script2]: false, 


[script3]: false 


for(let Script of scripts)t{ 
// IE 浏览 器 的 情况 设置 readyState 来 判断 
if (script.readyState) { 
script.onreadystatechange = function() { 
let state = this,.readyState; 
if (state === 'Joaded' || state === 'complete') { 
callback(); // 脚本 加 载 成 功 回调 
// 表示 该 脚本 加 载 成 功 


loaded[script] = true; 


} 
} else { 
// 其 他 浏览 器 ， 如 Firefox、Safari、Chrome 或 0pera， 结 合 


onLoad 
Script,onload = function() { 
callback(); // 脚本 加 载 成 功 回调 
// 表示 该 脚本 加 载 成 功 


loaded[script] = true; 


setTimeout(function(){ 
// 例如 15 秒 后 执行 页 面 脚本 加 载 情 况 的 上 报 进 行 统计 
report(loaded); 

}, 15000); 


在 上 面 的 例子 中 ， 我 们 在 这 三 个 脚本 加 载 成 功 时 将 文件 加 载 是 否 
成 功 的 标志 位 改 为 tue， 一 段 时 间 后 进行 上 报 ， 如 果 某 个 文件 加 载 没有 
成 功 ， 其 地 址 将 会 上 报到 服务 器 端 并 被 我 们 收集 到 ， 然 后 通过 分 析 和 
统计 就 可 以 监控 到 文件 加 载 失 败 的 情况 了 。 


5.5.4 ”前 端 性 能 分 析 上 报 


在 本 章 第 四 节 中 ， 我 们 讲 到 了 前 端 性 能 测试 方法 和 优化 方法 。 需 
要 注意 的 是 ， 开 发 者 怎样 知道 用 户 端 打开 页 面 时 的 性 能 如 何 呢 ， 一 个 
可 行 的 方法 就 是 将 页 面 性 能 数据 进行 上 报 统 计 ， 例 如 将 Performance 
Timing 数 据 、 开 发 者 自己 埋 点 的 性 能 统计 数据 通过 页 面 JavaScript 统 一 
上 报到 远程 服务 器 ， 在 服务 器 端 统计 计算 性 能 数据 的 平均 值 来 评判 前 
端 具体 页 面 的 性 能 情况 。 移 动 端 首 屏 建议 加 载 的 最 长 时 间 为 3 秒 ， 推 荐 


为 1.5 秒 以 内 。PC 端 推荐 为 1 秒 以 内 ， 最 长 不 超过 1.5 秒 。 如 果 检 测 到 页 
面 首 屏 加 载 的 时 间 超 出 了 推荐 的 最 大 值 时 ， 那 就 需要 使 用 前 端 性 能 优 
化 手段 进行 优化 了 。 


以 上 介绍 的 是 前 端 页 面 数据 统计 和 分 析 的 主要 内 容 ， 在 实际 项 目 
中 我 们 可 以 根据 产品 或 开发 需要 来 进行 实践 。 需 要 注意 的 是 ， 不 要 过 
度 设计 ， 例 如 对 于 访问 量 很 少 的 网 站 进行 大 量 的 用 户 行为 分 析 可 能 就 
得 不 偿 失 了 。 


5.6 ”前端 搜索 引擎 优化 基础 


搜索 引擎 优化 简称 SEO ， 知 道 的 人 也 许 很 多 ， 但 关注 的 人 并 不 是 
太 多 ， 因 为 我 们 单单 是 在 已 有 的 项 目 上 面 进 行 开 发 ， 或 者 进行 Hybrid 页 
面 开 发 ， 遇 到 的 场景 并 不 多 。 作 为 前 端 工 程 师 ， 了 解 搜索 引擎 优化 方 
面 的 相关 知识 是 很 重要 的 ， 这 一 节 我 们 来 一 起 学 习 关 于 搜索 引擎 优化 
方面 需要 注意 的 内 容 。 


5.6.1 title、keywords、description 的 


优化 


title、 keywords、 description 是 可 以 在 HTML 的 <meta> 标 签 内 定义 
的 ， 有 助 于 搜索 引擎 抓 取 到 网 页 的 内 容 。 要 注意 的 是 ， 一 般 title 的 权重 
是 最 高 的 ， 也 是 最 重要 的 ， 因 此 我 们 应 该 好 好 利用 title 来 提高 页 面 的 权 
重 。keywords 相 对 权重 较 低 ， 可 以 作为 页 面 的 辅助 关键 词 搜 索 。 
description 的 描述 一 般 会 直接 显示 在 搜索 结果 的 介绍 中 ， 可 以 使 用 户 快 


速 了 解 页 面 内 容 的 描述 文字 ， 所 以 要 尽量 让 这 段 文 子 能 够 描述 整个 页 
面 的 内 容 ， 增 加 用 户 进 入 页 面 的 概率 。 


title 的 优化 


一 般 title 的 设置 要 尽量 能 够 概括 页 面 的 内 容 ， 可 以 使 用 多 个 title 关 
键 字 组 合 的 形式 ， 并 用 分 隔 符 连接 起 来 。 分 隔 符 一 般 有 “”、“-”、“”、 
，” 和 等， 其 中 “_” 分 隔 符 比较 容易 被 百度 搜索 引擎 检索 到 ,，“-” 分 隔 符 
则 容易 被 谷歌 搜索 引擎 检索 到 ,“， a 可 
以 使 用 空格 。title 的 长 度 在 昌 面 浏览 器 端 一 般 建 议 控制 在 30 个 字 以 内 ， 
在 移动 端 控制 在 20 个 字 以 内 ， 若 长 度 超出 时 洲 览 器 会 黑 认 夫 疡 并 显示 
省 略 号 。 在 实际 开发 中 ， 因 为 具体 业务 的 关系 ， 我 们 可 能 更 多 针对 百 
度 搜 索引 擎 进行 优化 ， 下 面 提出 几 点 关于 百度 搜索 引擎 优 化 的 建议 。 


关于 title 格 式 的 优化 设置 可 以 遵循 以 下 规则 。 


o 每 个 网 页 都 应 该 有 独一无二 的 标题 ， 切 鼠 所 有 的 页 面 都 使 用 同 
样 的 默认 标题 


o 标题 主题 明确 ， 应 该 包含 网 页 中 最 重要 的 信息 
o 简明 精练 ， 不 应 该 罗列 与 网 页 内 容 不 相关 的 信息 


o 用 户 浏览 通常 从 左 到 右 的 ， 建 议 将 重要 的 内 容 放 到 title 靠 前 的 
位 置 


o ”使 用 用 户 所 熟知 的 语言 描述 ， 如 果 有 中 、 美 文 两 种 网 站 名 称 ， 
尽量 使 用 用 户 熟 知 的 语言 作为 标题 描述 


对 于 网 站 不 同 页 面 title 的 定义 可 以 设置 如 下 。 
o 首页 : 网 站 名 称 _ 提 供 服 务 介绍 或 产品 介绍 
o 列表 页 : 列表 名 称 _ 网 站 名 称 

o 文章 页 : 文章 标题 文章 分 类 网 站 名 称 


o 如 果 文 章 标题 不 是 很 长 ， 还 可 以 增加 部 分 关键 词 来 提高 网 页 的 
检索 量 ， 如 文章 title 关键 词 _ 网 站 名 称 


例如 某 个 博客 的 名 称 为 极限 前 端 ， 那 么 其 首页 的 title 就 可 以 如 下 编 
写 。 


<!-- 不 好 的 title 设置 --> 
<title> 极 限 前 端 </title> 


<title> 极 限 前 端 front end</title> 


<!-- 良好 的 title 设置 --> 
<title> 极 限 前 端 首页 _ 前端 技 术 知 识 _ 某 某 某 的 博客 </title> 


keywords 

keywords 是 目前 用 于 页 面 内 容 检索 的 辅助 关键 字 人 信息， 容易 被 搜 
索引 擎 检索 到 ， 所 以 恰当 的 设置 页 面 keywords 内 容 对 于 页 面 的 SEO 也 是 
很 重要 的 ， 而 且 keywords 本 身 的 使 用 也 比较 简单 。 


description 优 化 


在 搜索 引擎 检 索 结 果 中 ，description 更 重要 的 作用 是 作为 搜索 结果 
的 描述 ， 而 不 是 作为 权 值 计算 的 重要 参考 因素 。description 的 长 度 在 桌 
面 浏览 器 页 面 中 一 般 为 78 个 中 文字 符 ， 移 动 端 为 50 个 ， 超 过 则 会 自动 
截断 并 显示 省 略 号 。 如 下 定义 title、keywords、description 比 较 合 适 。 


<!-- 不 好 的 title、keywords、description 优化 设置 - -> 
<title> 极 限 前 端 </title> 


| 


<meta name="keywords" content=" 极 限 前 端 "> 


0 yl 


<meta name="description" content=" 极 限 前 端 "> 


<!-- 良好 的 title、keywords、description 优化 设置 - -> 
<tit1le> 前 端 搜索 引擎 优化 基础 _ 极 限 前 端 _ 前 端 技术 知识 _ 某 某 某 的 博客 </tit1le> 
<meta name="keywords" content=" 现 代 前 端 技术 ， 前端 页 面 SEO 优化 ， 极 限 
前 端 ， 某 某 某 的 博客 "> 

<meta name="description" content=" 本 章 讲述 了 前 端 搜索 引擎 优化 基础 实践 技 
术 。"> 


5.6.2 ”语义 化 标签 的 优化 


title、keywords、description 的 设置 对 页 面 SEO 具有 重要 意义 ， 但 除 
了 页 面 title、keywords、description 外 ， 还 有 我 们 通常 说 的 页 面 结 构 语 
义 化 设计 ， 因 为 搜索 引擎 分 析 页 面 内 容 时 可 以 解析 语义 化 的 标签 来 获 
取 内 容 ， 并 赋予 相关 的 权重 ， 因 此 语义 化 结构 的 页 面 就 比 全 部 为 <div> 
标签 元 素 布 局 的 页 面 更 容易 被 检索 到 。 结 合 语义 化 标签 我 们 可 以 实现 
更 多 的 功能 。 


使 用 具有 语义 化 的 HTML 5 标签 结构 


如 果 页 面 兼容 性 条 件 允 许 (主要 是 指 浏览 器 兼容 性 允许 ) ， 尽 量 
使 用 HTML5 语 义 化 结构 标签 。 如 图 5-8 所 示 ， 使 用 <header>、<nav>、 
<aside>、<article>、<footer> 等 标签 增加 页 面 的 语义 化 内 容 ， 可 以 让 搜 
索引 擎 更 容易 获取 页 面 的 结构 内 容 。 


< 站 av> 


<aside> <article> 


<footer> 


图 5-8 SEO 友好 的 页 面 结构 


唯一 的 H1 标 题 


建议 每 个 页 面 都 有 一 个 唯一 的 <h1> 标 题 ， 但 一 般 <h1> 内 容 并 不 是 
网 站 的 标题 。<h1> 作 为 页 面 最 高 层级 的 标题 能 够 更 容易 被 搜索 引擎 收 
录 ， 并 赋予 页 面相 对 较 高 权重 的 内 容 描 述 。 一 般 我 们 设置 首页 的 <h1> 
标题 为 站 点 名 称 ， 其 他 内 页 的 <h1> 标 题 则 可 以 为 各 个 内 页 的 标题 ， 如 
分 类 页 用 分 类 的 名 字 、 详 情 页 用 详情 页 标题 等 。 


因为 SEO 的 需要 ， 应 该 尽量 保证 搜索 引擎 抓 取 到 的 页 面 是 有 内 
容 的 ， 但 是 以 AJAX 技 术 实 现 的 SPA 应 用 在 SEO 上 不 具有 优势 ， 因 此 
要 尽量 避免 这 样 的 页 面 实 现 方式 ， 后 面 会 讲解 如 何 使 用 后 端 数据 泻 
染 的 方式 来 解决 AJAX 类 型 网 站 的 SEO 问题 。 


<img> 添 加 alt 属 性 


一 般 要 求 <img> 标 签 必须 设置 alt 属 性 ， 这 样 更 有 利于 搜索 引擎 检索 
出 图 片 的 描述 信息 。 


5.6.3 “URL 规 范 化 


统一 网 站 的 地 址 链接 : 


http://www.domain.com 
http://domain.com 
http://www.domain.com/index.html 


http://domain.com/index.html 


以 上 四 个 地 址 都 可 以 表示 跳 转 到 同一 个 站 点 的 首页 ， 虽 然 不 会 对 
用 户 访问 造成 什么 嘛 烦 ， 但 对 于 搜索 引擎 来 说 是 四 条 网 址 并 且 内 容 相 
同 。 这 种 情况 有 可 能 会 被 搜索 引擎 误 认 为 是 作 浆 手段 ， 另 外 当 搜 索引 
黎 要 规范 化 网 址 时 ， 需 要 从 这 些 选择 中 挑 一 个 作为 代表 ， 但 是 挑 的 这 
一 个 不 一 定 是 最 好 的 ， 因 此 我 们 最 好 统一 搜索 引擎 访问 页 面 的 地 址 ， 
否则 可 能 影响 网 站 入 口 搜索 结果 的 权重 。 


301 跳 转 


如 果 URL 发 生 改 变 ， 一 定 要 使 日 的 地 址 301 指 向 新 的 页 面 ， 否 则 搜 
索引 擎 会 把 原 有 的 这 个 URL 当 作 死 链 处 理 ， 之 前 完成 的 页 面 内 容 收 录 
权重 的 工作 就 都 失效 了 。 


canonical 


当 该 页 面 有 不 同 参数 传递 的 时 候 ， 标 签 属性 也 可 以 起 到 标识 页 面 
唯一 性 的 作用 ， 例 如 以 下 三 个 地 址 。 


//:domain.com/index.html 
//:domain.com/index.html?from=123 


//:domain.com/index.html?from=456 


在 搜索 引擎 中 ， 以 上 三 个 地 址 分 别 表示 三 个 页 面 ， 但 其 实 后 面 两 
个 一 般 表 示 页 面 跳 转 的 来 源 ， 所 以 为 了 确保 这 三 个 地 址 为 同一 个 页 
面 ， 往 往 在 <head> 上 加 上 canonical 声 明 ， 告 诉 搜索 引擎 在 收录 页 面 时 可 
以 按照 这 个 href 提 供 的 页 面 地 址 去 处 理 ， 而 不 是 将 每 个 地 址 都 独立 处 
和 理 s 


<link rel="cononical" href="//:domain.com/index.html" /> 


5.6.4 robots 


robots.txt 是 网 站 站 点 用 来 配置 搜索 引擎 抓 取 站 点 内 容 路 径 的 一 种 控 
制 方 式 ， 放 置 于 站 点 根 目 录 下 。 搜 索引 擎 爬虫 访问 网 站 时 会 访问 


robots.txt 驻 件 ，robots.txt 可 以 指导 搜索 引擎 爬虫 禁止 抓 取 网 站 某 些 内 容 
或 只 人 允许 抓 取 哪 些 内 容 ， 这 就 保证 了 搜索 引擎 不 抓 取 站 点 中 临时 或 不 
重要 的 内 容 ， 保 证 网 站 的 主要 内 容 被 搜索 引擎 收录 。 


5.6.5 _ Sitemap 


sitemap 格 式 一 般 分 为 HTIML 和 XML 两 种 ， 命 名 可 以 为 sitemap.html 
或 sitemap.xml， 作 用 是 列 出 网 站 所 有 的 URL 地 址 ， 方 便 搜 索引 擎 去 逐 
个 抓 取 网 站 的 页 面 ， 增 加 网 站 页 面 在 搜索 引擎 中 的 的 曝光 量 。 


<?xml1 version="1.0" encoding="UTF-8"?> 
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"> 
<url> 
<loc>//www.domain.com</loc> 
<lastmod>2016-12-28</lastmod> 
<changefreq>always</changefreq> 
<priority>1.0</priority> 


</url> 


</urlset> 


如 上 述 代 码 所 示 ， 其 中 <urlset>、<urll>、<loc> 为 必须 标签 ， 
<lastmod>、<changefreq>、 <priority> 为 可 选 标 签 ，<lastmod> 表 示 页 面 
最 后 一 次 的 更 新 时 间 ，<changefreq> 表 示 文 件 更 新 频率 ，<priority> 表 示 
URL 相 对 的 重要 程度 ， 取 值 范围 为 0~ 1.0，1.0 表 示 最 重要 ， 一 般 用 在 首 
页 上 。 这 样 搜 索引 擎 收录 网 站 时 不 仅 可 以 遍历 站 点 所 有 地 址 ， 还 可 以 
给 予 不 同 页 面 不 同 的 权重 。 


天 于 SEO 的 内 容 有 很 多 ， 本 节 只 是 用 简短 的 篇 幅 讲解 了 实际 开发 
中 可 能 涉及 的 部 分 。 如 果 要 深入 研究 SEO， 可 以 读 一 本 专门 针对 于 搜 
索引 擎 优化 方面 的 书 (一 般 都 是 很 厚 的 一 本 ) 。 


5.7 前端 协作 


前 端 技 术 从 来 都 不 是 独立 存在 的 ， 它 是 互联 网 应 用 复杂 到 一 定 程 
度 后 衍生 出 来 的 一 块 分 支 技术 领域 。 前 端 技术 涉及 UI 界面 、 数 据 展 
示 、 用 户 交 互 等 实现 ， 因 此 作为 一 名 合格 的 前 端 工程 师 就 不 可 避免 地 
要 和 团队 其 他 成 员 进 行 协作 沟通 ， 如 产品 经 理 、UI 设 计 是、 交互 设计 
师 、 后 台 工 程 师 、 运 维 工程 师 等 。 这 一 节 我 们 就 来 聊 聊 前 端 工程 师 应 
该 如 何 高 效 地 完成 团队 协作 的 使 命 。 


5.7.1 ”沟通 能 力 和 沟通 技巧 


可 能 是 因为 工作 性 质 的 缘故 ， 工 程 师 常 常 比较 内 向 。 但 是 对 于 团 
队 合作 的 项 目 ， 沟 通 必 不 可 少 ， 团 队 协 作 中 的 沟通 意义 重大 。 


什么 是 沟通 能 力 ? 通俗 地 说 就 是 你 向 别人 传达 信息 或 从 别人 那里 
获取 信息 的 能 力 。 沟 通 技 巧 就 是 为 了 高 效 传达 信息 或 获取 信息 使 用 的 
方法 和 手段 。 例 如 ， 产 品 经 理 需 求 宣 讲 时 有 需求 PPT、 描 述 、 交 互 图 
等 ， 那 么 需求 就 是 要 传递 的 信息 ， 会 议 、PPT、 描 述 、 交 互 图 等 是 方法 
和 手段 ， 即 沟通 技巧 。 学 会 了 高 效 的 沟通 技巧 可 以 大 大 减少 沟通 所 消 
耗 的 时 间 ， 提 升 整体 工作 效率 。 


相反 地 ， 工 程 师 有 时 也 会 成 为 信息 的 传递 者 。 例 如 ， 你 向 产品 经 
理 提出 他 的 需求 问题 或 改进 建议 时 ， 对 方 如 果 能 很 快 明日 你 要 讲 的 内 
容 ， 说 明 这 次 沟通 是 高 效 的 。 前 端 工 程 师 需要 合作 或 沟通 的 角色 多 种 


多 样 ， 所 以 我 们 平时 要 注意 提高 沟通 效率 来 节省 沟通 时 间 ， 从 而 提升 
工作 效率 。 


5.7.2 ”与 产品 经 理 的 “对 抗 ” 


关于 工程 师 和 产品 经 理 有 无 数 经 典 幽 默 的 段子 ， 但 是 我 要 说 的 不 
是 这 些 。 产 品 经 理 通常 是 直接 给 我 们 提出 开发 需求 的 团队 角色 ， 这 是 
他 的 工作 。 关 于 产品 经 理 ， 推 荐 前 端 工 程 师 去 看 一 两 本 关于 该 角色 的 
书籍 来 了 解 一 下 这 个 工作 ， 这 样 才能 知己 知 彼 ， 共 同 提高 效率 。 


对 于 产品 经 理 的 需求 ， 我 们 要 完成 ， 但 同时 务必 要 考虑 以 下 几 
点 。 
o 产品 经 理 提出 的 需求 是 否 明确 。 要 先 弄 明白 需求 ， 如 果 需 求 不 
明确 ， 一 定 要 找 提 需 求 的 人 确认 清楚 ， 不 要 盲目 写 代码 。 


o 技术 方案 是 否 可 行 ， 即 需求 开发 的 难度 评估 。 一 般 产品 经 理 提 
需求 之 前 会 评估 实现 的 难度 ， 但 不 一 定 准 确 ， 如 果 某 个 功能 
实现 难度 较 大 超出 了 产品 经 理 的 预期 ， 一 定 要 提出 来 ， 否 则 


后 期 容易 出 现 风险 。 
o 需求 性 价 比 是 否 够 高 。 如 果 某 个 功能 点 实现 代价 很 大 ， 但 是 功 


能 性 价值 一 般 ， 就 要 和 产品 经 理 沟通 ， 是 否 一 定 要 做 。 曾 经 
遇 到 过 极 少数 新 人 产品 经 理 提出 需要 翻新 染 构 才能 完成 的 需 


求 ， 这 种 情况 确认 不 可 行 后 建议 直接 驱 回 ， 但 这 种 情况 极 


\ 
少 。 


o 需求 是 否 合理 。 产 品 经 理 很 多 时 候 设计 功能 是 基于 客观 分 析 的 
主观 设计 ， 不 可 能 做 到 完全 正确 ， 有 时 提出 的 需求 都 不 太 合 
理 ， 那 就 要 对 他 提 的 需求 多 质疑 几 次 ， 在 开始 之 前 把 这 些 问 
题 过 滤 掉 。 


o 风险 管理 。 产 品 需求 常常 会 变更 ， 开 发 也 会 延期 ， 如 果 因 为 需 
求 变 更 导致 延期 一 定 要 告知 产品 经 理 ， 询 问 其 是 否 接 受 ， 不 
要 等 到 需求 交付 时 再 告诉 大 家 并 未 完成 。 


每 个 人 遇 到 的 情况 可 能 不 一 样 ， 但 有 一 条 相同 一 一 尽量 想 的 更 多 
一 些 ， 理 解 和 尊重 合作 伙伴 ， 因 为 能 一 起 合作 都 是 役 此 的 栾 笠 。 


5.7.3 ”与 后 人 台 工 程 师 的 合作 


另 一 个 和 前 端 工程 师 站 在 同一 战线 的 角色 可 能 就 是 后 台 开 发 工程 
师 了 。 一 般 线 上 出 现 问 题 后 会 先 抛 给 前 端 工程 师 ， 如 果 前 端 工程 师 定 
位 到 是 后 台 的 问题 ， 再 抛 给 后 台 工 程 师 ， 后 台 定 位 后 也 可 能 抛 给 底层 
开发 工程 师 ， 甚 至 追溯 到 运 维 工 程 师 处 。 在 这 个 过 程 中 ， 有 几 个 问题 
需要 注意 ， 开 发 过 程 常 常 是 前 、 后 台 并 行 开 始 的 ， 那 么 在 开发 中 ， 前 
端 如 何在 没有 后 台数 据 接口 的 情况 下 进行 开发 协作 呢 ? 


数据 协议 文档 


在 需求 开发 之 前 ， 我 们 通常 会 通过 文档 来 定义 数据 接口 协议 ， 这 
是 很 好 的 习惯 ,但 实际 上 这 种 方式 存在 问题 。 工 程 师 一 旦 开始 开发 ， 
可 能 就 没有 太 多 时 间 去 更 新 维护 接口 文档 了 ， 而 新 的 数据 接口 在 开发 
过 程 中 默认 是 一 定 会 变 的 ， 这 样 即使 使 用 了 接口 文档 管理 系统 也 不 一 
定 实用 ， 所 以 尽量 推荐 使 用 RESTful 的 通用 协议 规范 来 定义 数据 接口 。 
当然 基本 的 文档 一 定 是 需要 的 ， 它 可 以 帮助 我 们 解决 大 部 分 的 问题 。 


开发 沟通 方式 


这 点 直接 决定 前 、 后 端 工程 师 开 发 协作 的 效率 。 开 发 流程 在 进行 
时 ， 必 要 的 会 议 不 能 少 ， 信 息 沟通 的 方式 当然 最 好 是 前 、 后 台 开 发 人 
员 能 在 相同 的 办 公 区 域内 协作 。 一 些 大 的 企业 由 于 组 织 架 构 原 因 ， 
前 、 后 端 工程 师 可 能 会 分 开办 公 ， 这 种 情况 下 也 要 尽量 采用 最 直接 的 
沟通 方式 来 节省 沟通 时 间 。 


5.7.4 ”与 运 维 工程 师 的 “周旋 ” 


前 端 工程 师 很 少 会 和 运 维 人 员 沟 通 ， 但 也 不 是 完全 没有 。 运 维 人 
员 往 往 很 有 特点 ， 由 于 涉及 稳定 性 问题 ， 所 以 处 理 间 题 比较 谨慎 。 如 
果 你 要 找 运 维 工程 师 协 作 ， 一 定 要 有 耐心， 同时 也 不 能 被 他 们 拖 慢 节 
奏 ， 也 许 你 唯一 能 做 的 就 是 Push， 推 动 他 们 配合 你 的 工作 。 当 然 如 果 
分 工 比 较 综合 或 团队 比较 小 ， 也 可 能 不 存在 这 些 问题 。 


5.7.5 ”对 前 端 团 队 的 支持 


作为 一 名 前 端 工程 师 ， 除 了 保质 完成 业务 外 ， 也 要 利用 一 部 分 时 
间 来 不 断 学 习 ， 支 持 团队 的 技术 建设 ,例如 团队 开源 项 目 开发 维护 
等 ， 自 己 如 果 想 党 试 新 的 想法 也 可 以 提出 。 在 业务 的 开发 过 程 中 ， 我 
们 单单 充当 前 端 工程 师 的 角色 ， 而 在 团队 技术 影响 力 的 建设 中 ， 我 们 
也 肩负 着 团队 技术 驱动 者 和 突破 者 的 使 命 。 这 样 前 端 团队 才能 越 来 越 
影响 力 ， 相 反 则 会 在 前 端的 学 习 发 展 中 渐渐 失去 成 就 感 ， 甚 至 失去 
工作 的 激情 。 所 以 ， 硕 望 你 能 成 为 别人 眼中 的 优秀 工程 师 ， 同 时 在 团 
队 的 技术 建设 中 体现 自身 的 价值 。 


5.8 ”本 章 小 结 


在 这 一 章 中 ， 我 们 围绕 前 端 项 目的 实践 技术 重点 向 读者 们 介绍 了 
前 端 开发 规范 、 组 件 规范 设计 、 自 动 化 构建 原理 、 前 端 性 能 优化 、 前 
端 数据 分 析 和 SEO 等 内 容 。 深 入 学 习 和 理解 它们 的 设计 思路 和 原理 能 
帮助 我 们 解决 前 端 大 型 项 目 开发 时 遇 到 的 问题 ， 同 时 这 些 也 是 前 端 工 
呈 师 进行 目 我 提升 的 必 备 素养 ， 是 前 端 学 习 过 程 中 最 重要 的 技术 实践 
内 容 ， 和 希望 读者 们 可 以 有 一 个 通 透 的 理解 。 下 一 章 中 ， 我 们 将 开始 分 
析 前 端的 跨 栈 技术 ， 读 领 大 家 学 习 前 端 知识 技术 在 后 端 和 客户 端 中 的 
应 用 和 实践 。 


第 6 章 “前端 跨 栈 技术 


随 着 互联 网 架构 的 不 断 演进 ， 前 端 技 术 框 架 从 后 台 输 出 页 面 到 后 
台 MVC ， 再 到 前 端 MVC、MVP、MVVM ， 以 及 到 Virtual DOM 和 
MNV* 的 实现 ， 已 经 发 生 了 巨大 的 变化 。 整 体 上 来 看 ， 前 端 也 正在 朝 
着 模块 化 、 组 件 化 和 高 性 能 Web 开 发 模式 化 的 方向 快速 发 展 。 除 了 传 
统 桌 面 浏览 器 端 Web 上 的 应 用 ， 前 端 技术 栈 在 服务 端 或 移动 端 上 的 尝 
试 和 发 展 也 从 来 没有 停止 过 ， 而 且 形 成 了 一 系列 成 熟 的 解决 方案 。 所 
以 无 论 如 何 ， 可 以 肯定 的 是 ， 前 端的 技术 栈 能 解决 的 绝 不 只 是 页 面 上 
的 问题 ， 前 端 工 程 师 的 追求 也 绝 不 只 是 页 面 上 的 技术 。 前 端 技术 栈 到 
底 如 何 实现 跨 服 务 端 ， 又 如 何 扩展 到 移动 端 开发 呢 ? 这些 将 是 我 们 本 
章 要 具体 讨论 的 。 


6.1 JavaScript 跨 后 端 实 现 技 术 


这 几 年 全 栈 工 程 师 已 然 成 为 一 个 很 热门 的 关键 词 ， 从 最 早 的 
MEAN 技 术 栈 到 后 端 直 出 ， 再 到 现在 的 前 后 端 同 构 ， 前 端 通过 与 Node 
结合 的 开发 模式 越 来 越 被 开发 者 认同 并 在 越 来 越 多 的 项 目 中 得 到 实 
践 。 前 端 开发 者 都 热衷 于 在 Node 上 开发 有 以 下 几 个 原因 。 


o ”Node 是 一 个 基于 事件 驱动 和 无 阻塞 的 服务 器 ， 非 常 适合 处 理 
并 发 请 求 ， 因 此 构建 在 Node 上 的 应 用 服务 相 比 其 他 技术 实现 


的 服务 性 能 表现 要 好 ， 尽 管 目 前 Node 服 务 器 仍然 是 单 进程 运 
行 的 。 


o Node 端 运行 的 是 JavaScript， 对 于 前 端 开 发 者 来 说 学 习 成 本 较 
低 ， 要 关注 的 问题 相对 来 说 比 前 端 更 纯粹 些 ， 例 如 前 端 
JavaScript 兼 容 问 题 或 者 性 能 问题 都 不 需要 过 于 关注 (不 是 说 
Node 上 就 不 用 关注 JavaScript 性 能 问题 ， 只 是 浏览 器 端 
JavaScript 的 性 能 问题 显得 更 为 突出 ) 。 


o 作为 一 名 前 端 工程 师 确 实 需要 学 握 一 | 门 后 全 语言 来 辅助 目 己 
的 技术 学 习 。 


o ”Node 端 处 理 数据 泻 染 的 方式 能 够 解决 前 端 无 法 解决 的 问题 ， 
这 在 大 型 Web 应 用 场景 下 的 优势 就 体现 出 来 了 ， 这 也 是 目前 
Node 后 端 直 出 或 同 构 的 实现 方式 被 开发 者 广泛 使 用 的 一 个 重 
要 原因 。 


6.1.1 ” Node 后 端 开发 基础 概述 


作为 前 端 工程 师 ， 我 们 要 进行 Node 端 的 应 用 开发 ， 必 须 先 了 解 一 
些 基础 的 知识 。 我 们 先 来 看 一 下 进行 Node 后 端 上 的 应 用 开发 通常 需 
具备 哪些 方面 的 基础 知识 和 技术 。 


从 图 6-1 中 可 以 看 出 ， 要 掌握 Node 后 端的 主要 开发 技术 对 前 端 工程 
师 来 说 并 不 复杂 ， 很 多 知识 和 技术 都 和 前 端 内 容 类 似 ， 而 且 相 对 来 说 
大 多 是 比较 纯粹 的 逻辑 实现 。 


Web 服 务 器 基础 知识 


Node 后 端 开 发 


图 6-1 Node 后 端 基础 知识 和 技术 


o ”服务 器 知识 基础 。 和 浏览 器 端 开发 一 样 ， 我 们 需要 对 Web 服 务 
器 的 一 些 基础 知识 有 较 全 面 的 认识 ， 例 如 HTTP 请 求 的 过 程 、 
返回 码 、 缓 存 、Cookie 或 Session 在 服务 器 端的 工作 机 制 、 
Web 安 全 (sql 注 入、xss 内 容 、 用 户 认 证 信息 加 密 等 处 理 方 
式 ) 等 问题 ， 我 们 都 应 该 有 较 清 晰 的 了 解 。 笠 运 的 是 ， 这 些 
和 前 端的 基础 知识 是 相通 的 。 


o 简单 的 数据 库 设 计 能 力 。 少 数 情况 下 ， 我 们 可 能 会 自己 去 设 
计 一 些 简 单数 据 库 存储 表 的 结构 ， 这 就 要 求 我 们 具备 简单 设 
计数 据 库 结 构 和 数据 库 表 的 能 力 ， 目 前 在 Node 上 结合 
MongoDB 等 NoSQL 数 据 库 ， 使 用 起 来 已 经 非常 方便 了 。 结 合 
MongoDB 对 数据 库 对 象 的 常用 操作 进行 抽象 处 理 的 代码 如 


下 。 


const connectName = 'localhost/datasite'; 


const dbconect = require('monk')(connectName); 


function DB(dbname) { 


this.db = dbconect.get(dbname); 


// 插入 数据 库 记 录 操 作 
this.insert = function*(data) { 
let result = yield this.db.insert(data); 


return result,; 


// 查找 数据 库 记 录 操 作 
this.find = function* (obj, query) { 
let result; 
if (query) { 
result = yield this.db.find(obj, query); 
} else { 
result = yield this.db.find(obj); 
} 


return result,; 


// 更 新 数据 库 记 录 操 作 
this.update = function* (condition, data) { 
let result = yield this.db.update(condition, 
data ); 


return result,; 


// 删除 数据 库 记 录 操 作 
this.remove = function* (condition) { 
let result = yield this.db.remove(condition); 


return result; 


module.exports = DB; 


o 后 端 MVC 设 计 理 念 。 就 Node 端 Web 框 架 来 说 ， 目 前 主流 设计 
模式 仍 是 MVC 方 式 ， 即 用 户 请 求 进入 路 由 层 Route 匹配 ， 匹 
配 成 功 后 进入 控制 器 Controller ， 控 制 器 调用 Model 数 据 库 操 
作 ， 然 后 将 处 理 后 的 数据 结合 View 模 板 泻 染 出 HTML 文 本 给 
用 户 ， 或 者 是 将 处 理 后 的 的 数据 直接 作为 接口 返回 。 但 其 实 
这 个 流程 和 前 端 MVC 框 架 的 实现 理念 也 是 类 似 的 ， 只 是 实现 
的 技术 不 同 而 已 。 


o 后 端 异 步 。 除 了 理解 异步 的 概念 ， 我 们 对 Node 服 务 端 异 步 编 
程 的 方式 也 要 非常 熟悉 。 例 如 对 数据 库 操作 或 网 络 请 求 的 异 
步 处 理 方式 我 们 要 有 清晰 的 理解 。 同 时 ，Node 服 务 器 对 
ECMAScript 6 十 的 支持 为 我 们 实现 异步 编程 提供 了 许多 便捷 
的 实现 方案 ， 如 Promise、Generator、async/await 等 ， 这 些 都 
是 之 前 重点 介绍 过 的 ， 所 以 不 用 太 担心 技术 实现 的 问题 ， 例 
如 新 的 Koa 框 架 就 支持 async/await 来 直接 处 理 Web 后 端 中 的 异 
步 逻 辑 。 


const Koa = require('koa'); 


O 


O 


const app = new Koa(); 


app.use(async (ctx, next) => { 
const start = new Date(); 
await next(); 
const ms = new Date() - start; 
// 输出 请 求 地 址 URL 和 所 用 时 间 
console.log(  ${ctx.url} : ${ms}ms. ); 
}); 


// 页 面 响应 输出 
app.use(ctx => { 

ctx.body = 'Hello Koa!'; 
}); 


模块 化 思想 。 目 前 的 Node 端 JavaScript 开 发 主要 以 ECMAScript 
6 十 标准 为 主 ， 文 件 之 间 逻 辑 的 引用 仍 是 通过 模块 化 机 制 来 实 
现 的 ， 所 以 这 里 理解 模块 化 规范 和 使 用 仍 是 非常 重要 的 ， 在 
前 面 章节 中 我 们 也 讲 到 ，Node 端 常用 的 模块 化 规范 以 
CommonJS 和 import/export 为 主 ,与 浏览 器 开发 的 常用 模块 化 
规范 是 相同 的 ， 这 里 不 再 费 述 。 


中 间 件 技术 。 在 实际 开发 过 程 中 ， 我 们 还 需要 熟练 掌握 常用 
中 间 件 的 运用 和 开发 。 例 如 Cookie、Session、Body 解 析 等 高 
效 的 中 间 件 能 够 帮助 我 们 提高 开发 的 效率 ， 不 过 在 特殊 的 场 
景 中 ， 我 们 也 需要 根据 具体 问题 来 开发 满足 具体 需求 的 中 间 


件 模块 ， 例 如 在 Koa 中 就 可 以 用 如 下 方式 引入 自己 的 中 间 件 
模块 。 


const koa = require('koa'); 
const app = koal(); 
const myMiddleware = require('./middleware/my- 


middleware' ); 


app.use(myMiddleware); 


o 接口 设计 规范 。 推 荐 使 用 如 RESTful 这 样 的 规范 来 定义 数据 接 
口 ， 前 面 章节 中 我 们 也 具体 介绍 过 RESTful 接 口 规范 设计 的 
好 处 ， 所 以 要 尽量 利用 它 的 优势 来 解决 问题 。 


o 后 端 部 署 技术 和 基本 运 维 能 力 。 因 为 Node 主 要 是 在 服务 器 上 
工作 的 ， 所 以 掌握 基本 的 服务 器 部 署 和 运 维 能 力也 是 很 必要 
的 ， 例 如 Log 日 志 、 服 务 器 性 能 数据 的 收集 和 查看 等 ， 都 有 
助 于 我 们 及 时 发 现 和 定位 服务 器 端的 脚本 运行 问题 。 


需要 了 解 的 是 ， 这 里 讲 到 的 主要 是 针对 服务 器 Web 层 的 实现 技 
术 ， 关 于 底层 服务 层 数 据 开发 设计 的 内 容 本 书 不 涉及 。 


6.1.2” 早期 MEAN 简 介 


Node 出 现 的 早期 还 不 像 现 在 一 样 拥 有 很 复杂 的 概念 ， 相 关 技 术 和 
语言 的 标准 还 不 成 熟 ，Node 开 发 一 般 用 的 比较 多 的 方案 就 是 使 用 
Express 作 为 Web 框 架 进 行 小 型 的 Web 站 点 建设 ,与 之 结合 的 主流 技术 


则 以 M(MysqD)、E(GExpress)、A(Angulan、N(Node) 最 为 典型 ， 甚 至 到 
了 今天 MEAN 技 术 组 合 的 方式 仍 在 沿用 。 图 6-2 为 MEAN 的 经 典 结构 。 


ee 


Express 


图 6-2 ” MEAN 全 栈 架构 示意 图 


前 端 一 般 使 用 Angular 来 管理 实现 页 面 应 用 ， 服 务 端 Web 框 架 以 
Express 为 主 ， 同 时 使 用 免费 开源 的 MySQL 数 据 库 ， 这 样 就 可 以 很 快 地 
构建 一 个 Web 应 用 了 。 关 于 MEAN 的 使 用 也 非常 简单 ， 读 者 们 参看 对 
应 文档 就 可 以 快速 入 门 ，MEAN 的 安装 使 用 方法 如 下 。 


$ npm install -g mean-cli 

$ mean init appName 

$ cd appName && npm install 
$ gulp 


$ node server // 打开 浏览 器 访问 http://localhost:3000/ 就 可 以 启动 运 
行 一 个 简单 的 MEAN 应 用 了 


今天 我 们 可 能 不 一 定 再 去 选择 使 用 它 ， 因 为 可 以 代替 实现 的 成 熟 
方案 已 经 很 多 了 ， 各 类 其 他 前 后 端 框架 都 可 以 用 来 灵活 组 合作 为 
MEAN 的 替代 选 型 方案 。 


6.1.3 ”Node 后 端 数据 泻 染 


对 于 前 端 开 发 者 来 说 ， 在 大 型 Web 应 用 开发 中 ， 很 多 时 候 并 不 需 
要 完全 重新 设计 整个 应 用 后 台 的 架构 ， 更 多 的 情况 下 需要 结合 Node 的 
能 力 帮助 我 们 解决 前 后 端 分 离开 发 模式 下 无 法 解决 的 问题 。 我 们 先 来 
看 下 通常 前 后 端 分 离 的 开发 模式 下 有 哪些 问题 ， 利 用 Node 端 的 服务 又 
是 如 何 帮助 我 们 解决 这 些 问题 的 。 


SPA 场 景 下 SEO 的 问题 


通 单 情况 下 ，SPA 应 用 或 前 后 端 分 离 的 开发 模式 下 页 面 加 载 的 基 
本 流程 是 ， 浏 览 器 端 先 加 载 一 个 空 页 面 和 JavaScript 肢 本， 然后 异步 请 
求 接口 获取 数据 ， 泻 染 页 面 数 据 内 容 后 展示 给 用 户 。 那 么 问题 来 了 ， 
搜索 引擎 抓 取 页 面 解 析 该 页 面 HTML 中 关键 字 、 描 述 或 其 他 内 容 时 ， 
JavaScript 疝 未 调用 执行 ， 搜 索引 和 擎 获取 到 的 仅仅 是 一 个 空 页 面 ， 所 以 
无 法 获取 页 面 上 <body> 中 的 具体 内 容 ， 这 就 比较 影响 搜索 引擎 收录 页 
面 的 内 容 排行 了 。 尽 管 我 们 会 在 空 页 面 的 <meta> 里 面 添加 keyword 和 
description 的 内 容 ， 但 这 肯定 是 不 够 的 ， 因 为 页 面 关 键 性 的 正文 内 容 描 
述 并 疫 有 被 搜索 引擎 获取 到 。 


如 果 使 用 Node 后 端 数据 渲染 (有 人 称 之 为 直 出 ， 后 文中 也 称 之 为 
直 出 层 ) ， 在 页 面 请 求 时 将 内 容 泻 染 到 页 面 上 输出 ， 那 么 搜索 引擎 获 
取 到 的 HTML 就 已 经 包含 页 面 完整 的 内 容 ， 页 面 也 就 更 容易 被 检索 到 
了 。 


前 端 页 面 泻 染 展示 缓慢 的 问题 


除了 SEO 问题 ， 在 前 后 端 分 离 的 开发 模式 下 页 面 在 JavaScript 执 行 
泻 染 之 前 是 空白 的 (或 提示 用 户 加 载 中 ) 。 如 图 6-3 所 示 ， 用 户 在 看 到 
数据 时 已 经 花费 的 网 络 等 待 时 间 : DOM 下 载 时 间 + DOM 解 析 时 间 + 
JavaScript 文 件 请 求 时 间 + JavaScript 部 分 执行 时 间 十 接口 请 求 时 间 + 
DOM 泻 染 时 间 。 这 时 用 户 看 到 页 面 数据 时 已 经 是 三 次 串 行 网 络 资源 请 
求 之 后 的 事情 了 。 


5 JavaScript JavaScript i i 
DOM 解 析 生 > DOM 演 梁 
) 文件 请 求 部 分 执行 守信 


图 6-3 ”前 后 端 分 离 方 式 页 面 泻 染 主 要 流程 


然而 ， 如 果 使 用 后 端 直 出 来 进行 数据 泻 染 ， 首 先 SEO 的 问题 不 复 
存在 ， 用 户 浏览 器 加 载 完 DOM 的 内 容 解析 后 即 可 立即 展示 ， 网 络 加 载 
的 问题 也 得 到 解决 。 其 他 的 逻辑 操作 〈 如 事件 绑 定 和 滚动 加 载 的 内 
容 ) 则 可 按 需 、 按 异步 加 载 ， 从 而 大 幅度 减少 展示 页 面 内容 人 花费 的 时 
间 。 那 么 一 般 Node 后 端 数据 泻 染 的 整个 流程 又 是 怎样 的 呢 ? 


图 6-4 为 目前 一 般 后 台 页 面 数 据 直 出 的 通用 架构 设计 ， 直 出 层 接受 
前 端的 路 由 请 求 ， 并 在 Node 端 的 Controller 层 异步 请 求 服务 接 入 层 接 


口 ， 获 得 Model 数 据 并 进行 组 装 拼接 ， 然 后 提取 相对 应 的 Node 端 View 
模板 泻 染 出 HTML 输 出 给 用 户 浏览 器 ， 而 不 用 通过 前 端 JavaScript 请 求 
动态 数据 后 泻 染 。 不 仅 如 此 ， 直 出 层 根据 不 同 的 浏览 器 userAgent， 也 
可 以 提取 不 同 的 模板 泻 染 页 面 返回 给 不 同 的 用 户 浏览 器 ， 所 以 这 种 实 
现 方式 不 仅 非常 适合 大 型 应 用 服务 的 实现 场景 ， 而 且 可 以 方便 地 实现 
网 站 的 响应 式 内 容 直 出 。 


桌面 端 模板 


| 


桌面 端 提取 模板 
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y 移动 端 提取 模板 
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图 6-4 ”Node 直 出 层 开发 Web 架 构 


6.1.4 ”前 后 端 同 构 概述 


在 前 后 端 分 离 的 开发 模式 上 加 入 直 出 层 ， 解 决 了 SEO 和 数据 加 载 
显示 缓慢 的 问题 。 可 是 我 们 不 得 不 思考 两 个 新 的 问题 。 


o 前 端的 开发 实现 向 直 出 层 偏 移 ， 我 们 不 得 不 在 原来 的 开发 模 
式 上 做 出 修改 来 适应 直 出 层 内 容 的 开发 ， 例 如 修改 后 端 模 板 
来 适应 现 有 的 开发 模式 ， 结 果 我 们 不 得 不 维护 两 套 不 同 的 前 
后 台 模 板 或 技术 实现 一 一 前 端 泻 染 实现 逻辑 和 后 端 直 出 实现 
逻辑 ， 尽 管 可 能 都 是 用 JavaScript 写 的 。 


o ”如 果 是 在 移动 端 Hybrid 应 用 上 ， 离 线 包 机 制 实 现 可 能 就 会 出 现 
问题 。 因 为 每 次 都 是 从 后 端 直 出 HTML 结 构 给 前 端 ， 这 样 就 
难 做 到 将 HTML 文 件 进 行 离线 缓存 ， 而 只 能 进行 其 他 静态 文 
件 的 缓存 。 在 Hybrid App 的 应 用 场景 下 ， 其 实 我 们 更 希望 做 
到 的 是 移动 端 首次 打开 页 面 时 使 用 后 端 直 出 内 容 来 解决 加 载 
慢 和 SEO 问题 ， 而 在 有 离线 缓存 的 情况 下 则 使 用 客户 端 本 地 
缓存 的 静态 文件 拉 取 数据 返回 演 染 的 方式 来 实现 ， 或 者 未 来 
在 高 版 本 的 浏览 器 支持 HTTP2 的 条 件 下 使 用 前 端 泻 染 ， 低 端 
浏览 器 不 支持 HTTP2 的 情况 下 则 使 用 直 出 的 方式 实现 。 


所 以 我 们 需要 一 套 完善 的 开发 方式 ， 和 原 有 开发 方式 保持 一 致 ， 
且 能 够 同时 用 于 前 后 端 分 离 的 开发 模式 和 后 端 数据 泻 染 模板 开发 方式 
中 。 这 种 开发 模式 就 是 我 们 所 说 的 前 后 端 同 构 ， 下 面 系统 地 来 了 解 一 
下 前 后 端 同 构 的 一 些 内 容 。 


1. 实现 同 构 的 核心 


前 后 端 同 构 的 宗旨 是 ， 只 开发 一 套 项 目 代码 ， 既 可 以 用 来 实现 前 
端的 JavaScript 加 载 泻 染 也 可 以 用 于 后 人 台 的 直 出 泻 染 。 为 什么 可 以 这 样 
做 呢 ? 和 前 端 演 染 数据 内 容 的 方式 相同 ， 页 面 直 出 层 内 容 也 是 通过 数 
据 加 上 模板 编译 的 方式 生成 的 ， 前 端 泻 染 和 后 台 直 出 的 模式 生成 DOM 
结构 的 区 别 只 在 于 数据 和 模板 的 泻 染发 生 在 什么 时 候 。 如 果 使 用 一 套 


能 在 前 端 和 后 端 都 编译 数据 的 模板 系统 ， 我 们 就 可 以 做 到 使 用 同一 套 
开发 代码 在 前 后 端 分 别 进 行 数据 泻 染 解析 。 因 此 前 后 端 同 构 的 核心 问 
题 是 实现 前 后 台数 据 泻 染 的 统一 性 。 


2. 同 构 的 优势 


可 以 确定 的 是 ， 除 了 解决 前 后 端 开 发 方式 的 问题 ， 前 后 端 同 构 的 
网 站 具有 一 些 明显 的 优势 : (1) 可 以 根据 用 户 的 需求 方便 地 选择 使 用 
前 端 泻 染 数据 还 是 后 台 直 出 页 面 数据 ， (2) 开发 者 只 需 维护 一 套 前 端 
代码 ， 而 且 可 以 沿用 前 端 原 有 的 项 目 组 件 化 管理 、 打 包 构 建 方 式 ， 根 
据 不 同 的 构建 指令 生成 类 似 的 前 后 端 数 据 模 板 或 组 件 在 前 后 端 执行 解 
析 ， 所 以 这 对 于 DOM 结 构 层 上 的 开发 方式 应 该 是 一 致 的 。 


当然 ， 同 构 的 目的 是 为 了 统一 前 后 台 的 数据 泻 染 方案 ， 自 然 也 会 
牵扯 到 前 后 端的 适应 性 修改 ， 实 现 前 后 端 同 构 要 做 的 一 些 额 外 工作 可 
能 就 是 前 端 工程 师 要 开发 Node 端 直 出 层 上 的 路 由 配置 和 实现 数据 接口 
的 编写 。 从 实践 的 经 验 上 来 看 ， 这 部 分 的 工作 量 常常 是 无 法 避免 的 ， 
但 是 配合 在 直 出 层 来 进行 会 更 加 值得 。 


6.1.5 ”前 后 端 同 构 实现 原理 


讲 到 前 后 端 同 构 的 实现 ， 我 们 或 许 会 很 快 想到 一 些 提供 这 项 能 
的 框架 ， 但 我 们 并 不 讨论 具体 的 框架 ， 而 是 讨论 实现 的 原理 。 目 前 就 
前 后 端 同 构 的 技术 实现 上 来 看 ， 至 少 有 三 种 思路 : 数据 模板 的 前 端 泻 
染 和 后 人 台 直 出 、MVVM 的 前 端 实现 和 后 台 直 出 、Virtual DOM 的 前 端 
泻 染 和 后 端 直 出 。 下 面 逐 一 介绍 。 


基于 数据 模板 的 前 后 端 同 构 方 案 


早 在 前 端 MVC 开 发 的 时 代 ， 前 端 模板 的 使 用 就 非常 广泛 ， 例 如 
Mustache、Handlebar 等 ， 基 本 原理 是 将 模板 描述 语法 与 数据 进行 拼接 
生成 HIML 代 码 字符 串 插入 到 页 面 特 定 的 元 素 中 来 完成 数据 的 泻 染 。 
同 理 ， 后 端 直 出 层 也 可 以 通过 该 方法 来 实现 数据 的 泻 染 产生 HTML 字 
符 串 输出 到 页 面 上 ， 如 果 前 后 端 使 用 同一 个 模板 解析 引擎 ， 那 么 我 们 
只 需要 编写 同一 段 模板 拉 述 语法 结构 就 可 以 在 前 端 和 后 端 分 开 进行 泻 
染 了 。 


如 图 6-5 所 示 ， 对 于 前 端 开 发 的 同一 段 模板 语法 结构 ， 我 们 既 可 以 
选择 在 浏览 器 端 泻 染 生成 HTML 字 符 串 输出 ， 也 可 以 选择 在 后 端 泻 染 
生成 HTML 字 符 串 输出 。 如 果 选 择 在 前 端 泻 染 ， 则 可 以 将 模板 进行 打 
包 编 译 ， 在 数据 请 求 成 功 后 进行 DOM 泻 染 ; 如 果 选 择 后 端 泻 染 ， 就 可 
以 将 模板 数据 直接 发 送 到 直 出 层 的 View 视 图 进行 党 染 ， 实现 同一 个 模 
板 语法 结构 在 前 后 端 泻 染 出 相同 的 内 容 。 不 过 这 里 需要 注意 的 事 是 ， 
要 保证 前 后 端 使 用 的 模板 泻 染 引 擎 或 者 模板 解析 的 语法 是 一 致 的 。 


模板 语法 结构 


《form action= ”id= “form > 
《label for=”text”>{{label}}</label> 
《input type=”text” value=” {{value}}”> 


</form> 


| 前 端 模板 解析 | 后 端 模板 解析 
= foxfm”> { 
xt “> 用 柱 拖 141a 朵 及 名 ， label:“ 用 户 名 "， 


sxt”valqaes: 箱 翘 宙 纵 鱼 知 ， value: “输入 初始 值 ， 
} } 


《form action=Y id=”form”> 
《label for=”text > 用户 名 </1abel1> 
“input type=”text”value=“ 输 入 初始 值 ^> 
</form> 


前 端 生 成 HTML 文 本 后 端 生成 HTML 文 本 


图 6-5 ”模板 泻 染 的 同 构 方式 原理 


基于 MVVM 的 前 后 端 同 构 


我 们 知道 MVYVM 框 架 页 面 上 的 JavaScript 逻 辑 主要 是 通过 Directive 

(不 只 是 Directive， 还 有 filter、 表 达 式 等 ， 以 Directive 为 主 ) 来 实现 

的 ， 一 般 前 端 页 面 加 载 完 成 后 会 开始 扫描 DOM 结 构 中 的 Directive 指 令 

并 进行 DOM 操 作 泻 染 或 事件 绑 定 ， 所 以 数据 的 显示 仍然 需要 页 面 执行 

Directive 后 才能 完成 。 那 么 如 果 将 Directive 的 操作 在 直 出 层 实 现 ， 浏 览 
器 直接 输出 的 页 面 不 就 是 泻 染 后 的 内 容 数据 了 吗 ? 


如 图 6-6 所 示 ， 在 项 目 开 发 中 ， 前 端 编写 的 同一 段 MVVM 的 语法 
结构 通过 前 端 MVVM 框 架 解 析 或 后 端 Directive 运 行 解 析 最 终 都 可 以 生 
成 相同 的 HTML 结 构 ， 不 同 的 是 前 端 执行 解析 后 生成 的 是 ViewModel 
对 象 并 通过 浏览 器 体现 ， 后 端 泻 染 则 生成 HTML 标签 的 文本 字符 串 输 


出 给 浏览 这 里 同样 需要 做 一 件 事 ， 即 在 后 人 台 实 现 一 个 与 前 端 解析 
pirective 相 同 的 模块 甚至 还 包括 一 些 filter、 语 法 表达 式 等 的 实现 。 
这 样 就 可 以 在 前 后 端 完 成 同一 段 语 法 结构 的 解析 了 。 


MVVM 语 法 结构 


《form action=”” id=”form”> 

《label for=”text” q-html=”label”></label> 

《input type=”text” q-value=”value” q-model=”value”> 
《button q-on=”click: submit”></button> 
</form> 


前 端 MVVM 框 架 解析 | 后 端 directives 解 析 
{ 
ion=”” id=7fo 扣 7y A SE 
] for “text” 0 -hehel?1 19 由 潮 记 名 ca 1> label: ,用 / 名 SG 
en GBS “ 输 闪 牢 和 佳 value: “输入 初始 值 ， 
} 


lue”value= “输入 初始 值 人 > 
《form action=v ”id=“form “> 
《label for=”text”q-html= label1”> 用 户 名 《</label1>》 


《input type=”text” q-value=”value” q 


model=“value”value=“ 输 入 初始 值 ^> 
</form> 


前 端 生 成 DOM tree 后 端 生 成 HTML 文 本 


图 6-6 MVVM 实 现 的 同 构 方 式 原理 


基于 Virtual DOM 的 前 后 端 同 构 


前 面 讲 到 ， 目 前 Virtual DOM 作 为 一 种 新 的 编程 概念 被 广泛 应 用 在 
实际 项 目 开发 中 ， 其 核心 是 使 用 JavaScript 对 象 来 描述 DOM 结 构 。 那 么 
Dm DOM 是 一 个 JavaScript 对 象 ， 就 表示 其 可 以 同时 存在 于 前 后 

通过 不 同 的 处 理 方式 来 实现 同 构 。 


如 图 6-7 所 示 ， 在 前 端 开 发 的 组 件 中 声明 某 段 Virtual DOM 描 述 语 
法 ， 然 后 通过 Virtual DE et 解析 生成 Virtual DOM ， 这 里 的 Virtual 
DOM 既 可 以 用 于 在 浏览 器 端 生成 前 端的 DOM 结 构 ， 也 可 以 在 直 出 层 


直接 转换 成 HIML 标 记 的 文本 字符 串 输出 ， 后 面 这 种 情况 就 可 以 在 服 
务 端 上 实现 Virtual DOM 到 HTML 文 本 字符 串 的 转换 。 这 样 ， 通 过 对 
Virtual DOM 的 不 同 操作 处 理 ， 就 可 以 统一 前 后 端 泻 染 机 制 ， 实 现 组 件 
的 前 后 端 对 同一 段 描述 语法 进行 泻 染 。 


《11 Class= ul~llst-ltem 23 /117 
/ul>) 


Virtual DOM 描 述 语法 


创建 Virtual DOM 


tagName: "ul’, | 
props: { Virtual DOM 


id: "ui~list 


} 


children: [ 


{tagName: "1i’, props: {class: ’ui-list-item }, children: 
{tagName: ’1i’, props: {class: ’ui-list-item }, children: 
{tagName: ’1i’, props: {class: ’ui-list-item }, children: 

] 
} 


泻 染 成 DOM 泻 染 成 HTML 
DOM tree <ul id= uirlist > 
《li class= ui-list=item >1</1i> 


《li class=“ui-list-item >2</1i> 


《li class= ui-list-item >3</1i> 
(my Ry Me 


前 端 生成 DOM tree 后 端 生 成 HTML 文 本 


图 6-7 ”Virtual DOM 实 现 同 构 方式 原理 


这 里 Virtual DOM 上 的 逻辑 实现 仍然 需要 在 浏览 器 端 进行 事件 绑 定 
来 完成 ， 最 好 能 让 同 构 框 以 帮助 我 们 自动 完成 ， 根 据 HTML 的 结构 进 
行 特定 的 事件 绑 定 处 理 ， 保 证 最 后 展示 给 用 户 的 页 面 是 完整 且 带 有 交 
互 逻辑 的 。 


这 里 介绍 了 三 种 前 后 端 同 构 实现 的 思路 ， 而 且 三 种 方法 目前 都 有 
框架 来 实现 。 但 是 无 论 选 择 使 用 哪 一 种 方案 ， 其 核心 都 是 一 致 的 一 一 
使 用 同一 种 结构 内 容 的 描述 方式 通过 特定 的 规则 解析 转化 成 前 端 和 服 
务 端 均 能 够 处 理 的 DOM 结 构 形 式 。 此 时 ， 无 论 是 前 端 模板 、 
ViewModel、Virtual DOM、DOM 还 是 HTML 片 段 ， 都 只 是 前 端 浏 览 
结构 层 内 容 的 表示 方式 ， 而 且 是 可 以 相互 转化 的 ， 所 不 同 的 是 ， 页 面 
上 的 DOM 是 用 户 最 终 看 到 的 内 容 。 


图 6-8 为 前 后 端 同 构 的 原理 图 。 可 以 认为 实现 前 后 端 同 构 的 核心 都 
体现 在 HTML 的 结构 形式 变化 上 ， 页 面 内 容 的 描述 方式 有 很 多 ， 而 且 
可 以 通过 特定 的 处 理 过 程 实现 转化 ， 这 样 就 提供 了 更 多 的 可 能 性 。 


生成 HTML 


生成 DOM 


HTML 文 本 


server 解 析 浏览 器 解析 


2 


ViewMode1 初 始 化 


图 6-8 前 后 端 同 构 的 核心 原理 


需要 注意 的 是 ， 无 论 选 择 哪 一 种 前 后 端 同 构 的 实现 方案 ， 所 需要 
处 理 的 几 个 问题 是 类 似 的 。 


o 前 后 端 框架 选择 。 这 里 主要 包括 前 端 使 用 的 主要 框架 和 后 端 
结构 泻 染 解析 模块 的 选择 ， 通 常 选择 不 同 的 实现 方式 所 对 应 
的 框架 实现 也 不 一 样 。 例 如 基于 MVVM 的 实现 和 基于 Virtual 
DOM 的 具体 框架 实现 区 别 还 是 比较 大 的 。 


o 模板 演 染 机 制 。 这 对 实现 前 后 端 内 容 泻 染 的 统一 性 来 说 比较 
重要 。 刚 刚 也 重点 讨论 过 了 ， 关 键 的 不 同 点 主要 在 HTML 摘 
述 和 转化 方式 的 选择 上 面 ， 我 们 需要 保证 前 后 端 都 能 对 同一 


套 模板 或 描述 语法 进行 识别 处 理 ， 生 成 前 后 端 各 自 能 处 理 的 
结构 。 


o 构建 打包 。 同 一 套 代码 基于 前 后 端 场景 打包 完成 后 是 不 一 样 
的 ， 并 且 对 于 开发 者 来 说 需要 有 完整 的 模块 化 机 制 、 打 包 体 
系 和 不 同 的 输出 调试 目录 ,方便 业务 层 上 的 开发 。 打 包 完 成 
后 ， 服 务 端 实现 逻辑 和 前 端 实现 逻辑 也 应 该 分 开发 布 部 署 ， 
也 可 以 通过 在 直 出 层 Web 服 务 器 上 判断 来 选择 使 用 哪 种 方式 
输出 。 也 可 能 是 将 前 端 实现 的 逻辑 作为 移动 端 应 用 的 离线 包 
发 布 ， 服 务 端的 实现 逻辑 完成 直 出 层 的 View 模 板 泻 染 ， 这 样 
更 易于 管理 。 


o 泻 染 和 直 出 区 分 。 用 户 必 须 能 够 很 方便 地 选择 是 使 用 前 端 泻 
染 的 方式 还 是 后 台 直 出 的 方式 ， 例 如 可 以 在 浏览 器 地 址 URL 
后 面 添 加 render=1 参 数 来 区 分 ， 如 果 带 有 render 参 数 则 使 用 前 
端 泻 染 ， 同 时 进行 事件 绑 定 处 理 ， 否 则 默认 统一 使 用 后 端 直 
出 的 方式 ， 前 端 不 泻 染 数据 ， 只 做 事件 绑 定 处 理 。 这 样 就 可 
以 很 灵活 地 满足 更 多 的 应 用 场景 。 以 基于 数据 模板 的 前 后 端 
同 构 的 实现 方式 举例 ， 页 面 中 某 个 模块 的 泻 染 方式 实现 代码 
如 下 。 


// 获取 URL 中 的 参数 
let getUrlParam = function(name) { 
let reg = new RegExp("(^|&)" + name + "=([^]*) 
(&|$)"); 


window.1location.search.substr(1).match(reg); 


if (r != null) { 


return unescape(r[2]); 
} 
return null; 


}; 


const component = new Component({ 
// 前 端 录 个 具体 模块 泻 染 逻辑 
init (data) { 
// 如 果 URL 中 带 有 render 参数 ， 则 使 用 前 端 模板 泻 染 的 
方式 展示 数据 ， 否 则 只 做 事件 绑 定 
if (getUrlParam('render')) { 
this._renderData(data); 
} 
this._bindEvent(); 
}, 


_renderData (data) { 
// 调用 模板 泻 梁 数据 
this.$el.html(renderTpl({data: data})); 
}, 
_bindEvent(){ 
// TODOS， 页 面 事 件 绑 定 


}); 


以 上 为 前 后 端 同 构 实现 的 主要 内 容 ， 相 信 大 家 对 同 构 的 三 种 主要 
实现 方式 的 原理 也 比较 清楚 了 。 实 现 同 构 的 形式 很 灵活 ， 通 常 不 只 是 


我 们 知道 的 某 一 类 框架 实现 的 方式 ， 所 以 我 们 可 以 结合 更 多 实际 场景 
来 灵活 选择 。 


从 前 端 开 发 者 的 角度 来 看 ， 使 用 Node 进 行 服 务 器 端 开发 的 场景 
很 多 ， 但 主要 还 是 以 使 用 Node 作 为 服务 直 出 层 最 为 典型 。 这 一 节 主 要 
就 后 端 直 出 、 前 后 端 同 构 的 原理 进行 了 较 全 面 的 分 析 ， 实 际 项 目 中 我 
们 可 以 选择 借鉴 已 有 的 成 熟 解决 方案 ， 也 可 以 根据 自己 团队 的 特点 来 
重新 设计 和 实现 项 目 同 构 开发 整个 流程 中 的 具体 细节 。 


6.2 ”路 终 疹 设计 与 实现 
6.2.1 Hybrid 技术 趋势 


移动 互联 网 兴起 后 ， 智 能 移动 设备 出 现 ， 大 量 应 用 市 场 的 Native 
应 用 也 开始 涌现 。 随 着 第 一 波 移动 端 互联 网 开发 浪潮 渐渐 平静 ， 各 类 
Native 应 用 开始 进入 有 序 更 新 迭代 的 阶段 。 人 们 对 移动 互联 网 需求 急 
剧 增长 ，Native 应 用 快速 迭代 开发 的 需求 也 越 来 越 多 ， 但 是 现 有 Native 
应 用 的 开发 迭代 速度 依然 无 法 满足 市 场 快速 变化 的 需要 。 随 之 而 来 的 
是 HTML5 的 出 现 ， 它 允许 开发 者 在 移动 设备 上 快速 开发 网 页 端 应 用 ， 
并 让 移动 互联 网 应 用 开发 很 快 进入 了 Native 应 用 、Web 应 用 、Hybrid 应 
用 并 存 的 时 代 。 关 于 Native 应 用 、Web 应 用 、Hybrid 应 用 ， 相 信 大 家 都 
有 所 了 解 ， 但 就 目前 的 行业 发 展现 状 来 看 ， 它 们 之 间 的 区 别 显 然 也 有 
了 一 些 变化 ， 下 面 我 们 一 起 来 看 一 看 这 三 者 更 全 面 的 对 比 。 


Native 应 用 的 优点 


o 原生 系统 级 Native API 的 支持 ， 如 访问 本 地 资产、 相机 API 等 
o ”资源 在 打包 安装 时 生成 ， 节 省 用 户 使 用 时 的 流量 

o 可 针对 不 同 平台 特性 进行 用 户 体验 优化 

0 运行 速度 快 、 性 能 好 ， 可 使 用 原生 Native 动 画 库 
Native 应 用 的 缺点 

o 开发 成 本 高 ， 兼 容 性 差 ， 尤 其 是 对 于 Android 机 型 

o 维护 成 本 高 ， 用 户 必 须 手 动 下 载 更 新 ， 历 史 版 本 也 需要 维护 
o 上线 时 间 不 确定 ， 一 般 需 要 通过 应 用 商店 的 审核 

o 版 本 更 新 慢 ， 更 新 时 需要 用 户 重 新 下 载 安装 包 

o 应 用 界面 的 内 容 不 可 被 搜索 引擎 检索 

Web 应 用 的 优点 

o 开发 成 本 低 ， 使 用 前 端 开发 技术 即 可 

O 台 和 终端 ， 基 于 浏览 器 或 WebView 运 行 

o ”部 署 方式 简单 、 快 捷 ， 无 需 用 户 安装 

o ”用户 总 能 访问 到 最 新 版 本 ， 连 代 速 度 快 

o 内 容 可 被 搜索 引擎 检索 

Web 应 用 的 缺点 


O 


O 


O 


浏览 体验 无 法 超越 Native 应 用 
消息 推送 、 动 画 等 实现 方式 相对 Native 实 现 方 式 较 差 
不 能 调用 设备 的 原生 特性 ， 如 无 法 访问 本 地 资源 、 相 机 API 等 


Hybrid 应 用 的 优点 


O 


O 


开发 成 本 较 低 ， 可 以 使 用 前 端 开 发 技术 ， 甚 至 可 以 自动 添加 
Native 外 壳 来 实现 独立 移动 端 应 用 


台 和 终端 ， 内 容 网 页 可 基于 浏览 器 或 WebView 运 行 
拥有 与 Web 应 用 相同 的 快速 迭代 特性 
部 署 方式 简单 、 快 捷 ， 只 更 新 Web 资 源 即 可 
可 支持 实现 离线 应 用 


可 通过 JSBridge 调 用 设备 的 系统 级 API， 如 访问 本 地 资源 、 相 
机 API 等 


原生 应 用 版 本 迭代 和 Web 功 能 迭代 相互 独立 也 可 以 相互 结合 
不 同性 能 需求 的 功能 可 以 选择 性 使 用 Native 或 Web 实 现 
内 容 可 被 搜索 引擎 检索 


借助 于 MNV 米 的 开发 模式 可 以 更 接近 Native 应 用 的 用 户 体验 


Hybrid 应 用 的 缺点 


o 部 分 机 型 兼容 相对 Native 较 差 ， 但 比 Wweb 应 用 体验 好 很 多 


显然 ， 目 前 Hybrid 应 用 的 开发 模式 也 已 经 突破 了 开发 效率 和 性 能 
的 两 大 问题 ， 更 加 适应 移动 互联 网 时 代 产 品 高 迭代 速度 的 需求 ， 而 且 
目前 主流 的 移动 端 应 用 均 是 采用 Hybrid 的 方式 来 实现 的 ， 所 以 为 什么 
使 用 Hybrid 就 不 言 而 喻 了 。 下 面 我 们 直接 来 看 一 下 Hybrid 应 用 开发 的 
几 种 常见 实现 技术 。 


6.2.2 Hybrid 实现 方式 


相 比 Native 原 生 应 用 开发 ，Hybrid 应 用 开发 的 方式 就 比较 多 了 ， 我 
们 先 来 看 看 以 前 端 开 发 实现 为 主 的 Hybrid 开发 方式 。 


以 前 端 为 主 的 Hybrid 实现 方式 


这 种 方法 是 以 完全 的 前 端 模式 来 开发 整个 应 用 的 ， 页 面 开 发 完成 
后 ， 通 过 工具 自动 打包 将 前 端 资源 目录 装 入 Native 容 器 中 运行 ， 如 图 6- 
9 所 示 ， 打 开 应 用 运行 时 ， 除 了 部 分 通用 的 简单 逻辑 外 ， 内 部 逻辑 全 部 
由 打包 的 Web 端 代码 来 实现 。 在 以 Apache Cordova 为 基础 的 开发 工具 
实现 下 ， 前 端 开发 者 不 需要 了 解 Native 相 关 的 内 容 ， 只 需要 专注 于 前 
端 页 面 功 能 的 开发 即 可 ， 功 能 开发 完成 后 自动 将 前 端 内 容 统一 打包 进 
发 布 安装 包 ， 安 装 时 解压 到 移动 端 本 地 目录 加 载运 行 。 


这 种 思路 比较 简单 ， 通 常 借助 框架 即 可 实现 ， 而 且 成 本 很 小 。 其 
优势 是 前 端 开 发 者 可 以 独立 快速 构建 Hybrid 应 用 ， 不 需要 Native 开 发 人 
员 的 支持 ， 前 端 调用 Native 的 解决 方案 也 可 以 使 用 开源 的 JSBridge 库 


(如 cordova.js 等 ) 来 实现 。 但 是 这 种 方式 缺点 也 很 明显 : Native 功 能 
的 实现 只 能 通过 Web 的 方式 ， 并 且 无 法 添加 复杂 的 Native 功 能 ; 如 果 遇 
到 即时 通讯 或 服务 端 推送 的 的 应 用 场景 ， 使 用 Web 的 方式 实现 性 能 就 
比较 差 ; 与 Native 的 交互 方式 上 也 会 受到 固有 开源 库 实现 的 限制 ， 无 
法 灵活 扩展 ; 无 法 避免 在 应 用 版 本 更 新 时 需要 重新 下 载 安 装 应 用 的 问 
题 ，WebView 性 能 局 限 ， 所 有 的 功能 逻辑 都 是 在 WebView 中 实现 的 ， 
在 页 面 复杂 情况 下 性 能 比较 慢 ， 移 动 端 应 用 的 WebView 执 行 性 能 只 有 
移动 端 浏 览 器 性 能 的 1/3~ 1/4， 而 移动 端 浏览 器 本 身 的 解析 就 相对 较 
慢 。 所 以 这 种 实现 方式 适合 于 中 小 型 需要 快速 完成 开发 的 应 用 场景 ， 
如 果 是 在 用 户 量 较 多 、 实 时 性 要 求 较 高 、 应 用 需要 快速 持续 迭代 或 者 
需要 与 扩展 Native 功 能 结合 的 应 用 场景 中 ， 就 不 适用 了 。 


der> 


图 6-9 ”以 web 内容 为 主 的 Hybrid 实现 方式 


所 以 如 果 是 应 用 复杂 、 功 能 较 多 、 需 要 快速 迭代 更 新 的 情况 下 ， 
还 是 建议 使 用 自 定制 Native 和 Web 结 合 的 Hybrid 开 发 方式 来 组 建 应 用 。 


Native 和 Web 结 合 的 Hybrid 方式 


这 里 说 的 Native 和 Web 结 合 的 意思 主要 是 指 移 动 端 应 用 中 Native 和 
Web 功 能 上 的 结合 开发 实现 ， 为 什么 需要 这 样 做 呢 ? 通常 在 一 个 完整 
的 移动 端 Hybrid 应 用 中 ， 功 能 是 由 核心 Native 功 能 和 Web 站 点 页 面 组 成 
的 ， 其 中 Web 站 点 页 面 中 可 以 调用 Native 功 能 。 此 外 ，Native 和 Web 的 
功能 通常 也 不 一 样 ， 实 现 自己 最 擅长 的 功能 。 例 如 Native 就 可 以 用 来 
实现 移动 端 应 用 的 通用 导航 菜单 、 系 统 UI 层 、 核 心 界 面 动 效 、 默 认 访 
问 界 面 、 高 效 的 消息 推送 或 APP 大 版 本 的 应 用 更 新 等 ， 因 为 这 些 功能 
一 般 比较 稳定 ， 变 化 不 大 ， 而 且 不 涉及 需要 快速 迭代 的 业务 逻辑 。 而 
Web 端 则 可 用 来 实现 开发 迭代 速度 更 快 的 相关 业务 层 界 面 逻 辑 ， 它 很 
可 能 是 某 个 Native 应 用 内 关联 的 某 个 Web 轻 应 用 。 


图 6-10 为 某 个 支付 应 用 APP 的 设计 流程 ， 进 行 网 上 商城 购买 商品 
时 的 功能 业务 最 好 用 Web 方 式 实现 ， 如 APP 应 用 导航 或 支付 流程 等 部 
分 的 界面 就 应 该 用 Native 来 做 。 通 过 这 种 方式 ， 可 以 保证 关键 性 功能 
页 面 流程 的 用 户 体 验 和 Web 轻 应 用 的 快速 迭代 开发 ， 更 符合 现代 移动 
端 应 用 的 实现 标准 ， 目 前 国内 一 线 互 联网 企业 的 移动 端 核 心 业 务实 现 
方案 也 都 是 使 用 这 种 结合 方式 来 实现 的 。 


购买 商城 等 Web 页 面 


依赖 WebView 运 行 


Native 导 航 、 


WebView 


调用 运行 


Native 运 行 库 与 运行 环境 


图 6-10 ”典型 支付 APP 设 计 实 现 


需要 注意 的 是 ， 使 用 这 种 开发 模式 首先 要 非常 关注 开发 过 程 中 
Web 和 Native 的 调用 接口 规范 问题 ， 因 为 这 种 情况 下 我 们 一 般 不 会 借助 
开源 的 交互 实现 方案 ， 所 以 自己 如 何 去 设计 Web 和 Native 的 交互 协议 就 
显得 很 重要 了 。 本 书 第 二 章 第 五 节 向 大 家 详细 介绍 了 使 用 JavaScript 与 
Native 交 互 的 协议 与 规范 ， 目 前 一 般 的 解决 方式 就 是 通过 JSBridge 协 议 
在 Web 页 面 中 调用 Native 功 能 。 有 关 协 议 的 设计 规范 和 实现 可 以 去 参考 
此 章节 内 容 的 介绍 ， 这 里 就 不 再 继续 展开 了 。 


6.2.3 ”基于 localStorage 的 资源 离线 和 
更 新 技术 


介绍 完 Hybrid 应 用 的 实现 方式 ， 我 们 再 来 重点 看 看 Hybrid 应 用 上 
前 端 资源 离线 和 更 新 的 问题 。 在 Hybrid 应 用 开发 时 ， 常 常 需要 在 离线 
的 情况 下 打开 页 面 或 者 为 了 让 Hybrid 页 面 应 用 加 载 启 动 更 快 ， 避 免 长 
时 间 等 待 资 源 加 载 过 程 中 造成 页 面 空 白 的 出 现 。 因 此 我 们 必须 要 考虑 
使 用 资源 的 离线 缓存 技术 来 加 快 页 面 启动 时 的 载 入 速度 了 。 而 且 现代 
浏览 器 也 提供 了 一 些 页 面 上 静态 资源 文件 级 缓存 与 更 新 的 方式 ， 下 面 


我 们 就 来 看 一 下 Hybrid 应 用 中 实现 Web 端 资源 离线 与 更 新 的 可 行 方案 
都 有 哪些 。 


ServiceWorker 的 资源 离线 与 更 新 


在 第 一 章 第 二 节 中 我 们 了 解 了 可 以 通过 浏览 器 Application Cache 的 
方式 实现 页 面 资源 的 离线 加 载 和 更 新 。 但 这 里 需要 注意 的 是 ， 
Application Cache 这 种 方案 目前 开始 被 浏览 器 标准 弃 用 了 ， 取 而 代 之 的 
是 ServiceWorker 这 种 离线 技术 实现 机 制 。 前 面 章 节 中 我 们 对 
ServiceWorker 也 进行 了 具体 分 析 ， 这 里 仍 要 注意 目前 ServiceWorker 的 
浏览 器 兼容 性 支持 很 差 ， 导 致 这 种 方案 目前 还 不 成 熟 ， 或 者 说 在 短期 
内 仍 不 是 一 个 可 行 的 实践 方案 。 


localStorage 资 源 离线 缓存 与 更 新 


当然 除了 这 种 未 来 可 能 使 用 的 ServierWorker 解 决 方案 ， 目 前 实现 
前 端 离线 缓存 一 种 比较 简单 高 效 的 方法 就 是 使 用 localStorage。 早 期 的 
离线 资源 缓存 通常 也 是 使 用 这 种 方式 来 实现 的 ， 而 且 国 内 几 个 大 型 互 
联网 企业 的 前 端 团队 在 移动 端 资源 离线 化 方面 都 曾经 党 试 过 这 种 方 
法 ， 其 基本 思路 是 将 JavaScript、CSS 资 源 文件 甚至 是 接口 返回 的 数据 
资产 缓存 到 浏览 器 的 localStorage 中 ， 下 次 打开 页 面 时 不 进行 JavaScript 
和 CSS 资 源 的 请 求 ， ee toni 然后 插入 到 
页 面 中 解析 执行 。 这 里 需要 注意 的 是 ， 为 了 判断 是 加 载 线 上 静态 资源 
还 是 ee。 页 面 中 JavaScript 和 CSS 资 源 的 加 载 方 
式 通 常 都 是 动态 创建 标签 加 载 或 通过 eval 执 行 的 ， 而 且 通 常 只 有 页 面 
在 第 二 次 打开 或 之 后 加 载 静态 资源 的 情况 才 可 能 从 localStorage 中 读 
取 。 下 面 是 使 用 localStorage 缓 存 读 取 JavaScript 资 源 的 一 个 简单 实现 。 


<!- - 服务 器 最 新 的 版 本 可 以 在 最 新 的 html 文件 中 写 入 --> 


<div id="versiontStore" data-version="1.4"></div> 


<script> 
let ScriptPath = 'server/path/', 
Script = document ,createElLement( "Script ')， 
newVersion = 
document .getElementbyId('versiontStore').getAttibute('data- 
verion'), 


oldVersion = localStorage.getIitem('version') 


/* 如 果 有 版 本 更 新 或 者 本 地 没有 缓存 ， 则 请 求 新 的 JavaScript 内 容 插入 到 页 面 中 
执行 ， 同 时 保存 到 本 地 
localStorage */ 


if(newVersion > (oldVersion || 0))t{ 
$.ajax(t{ 
url: ‘${scriptPpath}main.${newVersion}.js ， 
type: 'get', 
dataType: 'text', 

success: function(content)t{ 
Script,InnerHTML = content,; 
document .appendCchild(script); 
// 更 新 localStorage 静态 资源 内 容 


_UupdateLocalstorage(scriptPath, content); 


}); 

}elsef 
/* 如 果 有 缓存 且 未 更 新 ， 则 直接 读 取 缓存 内 容 */ 
script.innerHtml = localStorage.getIitem(scriptPath); 
document .appendCchild(script); 

} 


</script> 


这 是 个 简单 的 例子 ， 在 加 载 文件 时 ， 页 面 新 的 版 本 号 已 经 写 到 
HTML 页面 上 或 者 通过 单独 的 接口 请 求 获 取 ， 页 面 脚本 通过 获取 页 面 
上 的 最 新 版 本 号 和 本 地 localStorage 保 存 的 旧版 本 号 进行 对 比 ， 的 
地 没有 版 本 号 或 版 本 号 较 上 日 ， 则 加 载 最 新 版 本 的 静态 资产 文件 到 
上 ， 同 时 更 新 本 地 原 有 的 localStorage 缓 存 内 容 和 版 本 号 ， 0 
取 localStorage 的 静态 资源 内 容 到 页 面 中 解析 执行 ， 基 本 的 实现 流程 如 
图 6-11 所 示 。 


这 种 实现 方式 的 好 处 是 比较 简单 ， 不 需要 服务 端 和 移动 客户 端 平 
台 的 支持 ， 可 以 实现 纯 移动 端 应 用 的 离线 访问 。 当 然 缺 点 也 很 明显 : 
首先 localStorage 的 大 小 有 限制 〈 同 域 一 般 认 为 是 5M 以 内 ) ， 同 域名 的 
localStorage 存 储 的 离线 资源 较 多 时 很 可 能 会 内 容 超 出 ， 容 易 出 错 ， 需 
要 通过 资源 替换 策略 来 处 理 ， 这 样 就 比较 麻烦 ， 其 次 是 用 户 如 果 手 动 
清空 localStorage 会 使 离线 资源 失效 ， 这 个 问题 基本 上 不 能 解决 ;还 有 
就 是 读 取 localStorage 的 速度 其 实 是 比较 慢 的 ， 尤 其 在 移动 端 ， 如 果 
localStorage 的 内 容 较 多 ， 返 回 的 速度 可 能 会 比较 慢 。 


当然 ， 使 用 这 种 方式 是 可 以 解决 一 部 分 问题 的 。 例 如 Hybrid 应 用 
的 页 面 通过 分 享 到 社交 平台 打开 的 情况 下 ， 如 果 用 户 是 第 二 次 打开 这 
个 页 面 ， 利 用 这 种 缓存 方式 就 可 以 加 快 页 面 的 载 入 速度 。 因 此 在 快速 
实现 离线 缓存 的 方式 上 ， 这 是 一 种 很 简易 实用 的 方法 。 我 们 再 来 看 看 
这 种 情况 下 ， 应 该 如 何 实现 localStorage 静 态 资源 的 更 新 。 


加 载 HTML 


读 取 最 新 版 本 号 和 本 
地 版 本 号 


读 取 localStorage 静 态 


资源 并 加 载 执行 


请 求 静态 资源 文件 并 加 
载 执行 


更 新 缓存 内 容 和 本 地 版 


本 号 


图 6-11 ”移动 端 常见 页 面 结构 


基于 增 量 文件 的 更 新 方式 


在 上 述 资源 访问 和 更 新 的 过 程 中 ， 当 静态 资源 改变 时 ， 如 果 像 上 
面 那样 每 次 都 进行 新 文件 的 全 量 更 新 也 不 是 不 可 以 ， 很 直接 、 易 实 
现 。 但 问题 是 ， 即 使 我 们 修改 了 代码 中 的 一 个 字符 或 语句 ， 就 要 更 新 
整个 静态 资源 文件 。 所 以 为 了 节省 流量 可 以 选择 增 量 文件 更 新 的 方 
式 。 


要 实现 增 量 文件 的 更 新 需要 做 更 多 的 事情 。 如 图 6-12 所 示 ， 假 如 
之 前 已 经 有 1.1、1.2、1.3 三 个 版 本 的 脚本 资源 发 布 ， 而 且 目 前 使 用 各 
个 版 本 的 用 户 都 存在 ， 现 在 1.4 版 本 的 离线 资源 文件 上 传 发 布 后 ， 为 了 
满足 不 同 版 本 用 户 的 增 量 更 新 ， 需 要 根据 前 面 三 个 版 本 的 文件 内 容 与 
最 新 版 本 内 容 进行 对 比分 析 ， 分 别 生成 三 个 不 同 版 本 的 增 量 文件 1.1- 
1.4.js、1.2-1.4.js、1.3-1.4.js， 同 时 还 需要 保留 1.4 版 本 的 全 量 文件 。 此 
时 服务 器 上 1.4 版 本 发 布 后 就 保留 了 四 个 不 同 的 文件 : 1.4 版 本 文件 、 相 
对 于 1.1 版 本 的 增 量 文件 、 相 对 于 1.2 版 本 的 增 量 文件 、 相 对 于 1.3 版 本 
的 增 量 文件 。 新 用 户 进入 页 面 应 用 后 直接 拉 取 1.4 版 本 文件 即 可 ， 前 三 
个 版 本 的 用 户 拉 取 的 则 分 别 是 三 个 不 同 的 增 量 文件 。 这 样 不 同 版 本 的 
用 户 就 可 以 增 量 更 新 到 不 同 的 内 容 了 ， 上 一 个 例子 的 实现 代码 就 可 以 
如 下 编写 了 。 


图 6-12 ” 增 量 文件 版 本 发 布控 制 


<1-- 服务 器 最 新 的 版 本 可 以 在 最 新 的 html 文件 中 写 入 --> 


<div id="versiontStore" data-version="1.4"></div> 


<script> 

let ScriptPath = 'server/path/main.js'; 

let Script = document.createElement('script"'); 

let newVersion = 
document .getElementbyId('versiontStore').getAttibute('data- 
verion' ) ; 


let oldversion = localStorage.getItem('version'); // 获取 旧 的 版 本 


号 
EE 


if(oldVersion && newVersion > oldVersion)t{ 
/* 如 果 本 地 有 缓存 ， 且 有 版 本 更 新 ， 则 请 求 新 的 对 应 版 本 的 增 量 文件 ， 然 后 进行 
增 量 计算 ， 并 生成 的 最 新 版 本 内 
容 保存 到 本 地 localStorage*/ 
$.ajax({ 
url: ‘$f{scriptPpath}${oldVersion}-${newVersion}.js ， 
type: 'get', 
dataType: 'text', 
success: function(content)t{ 
// 根据 增 量 文件 内 容 和 当前 内 容 计算 新 的 静态 资源 
content = _ calculate(content， 
localStorage.getIitem(scriptPath)); 
script.innerHTML = content ; 
document .appendChild(script); 
// 更 新 localStorage 静态 资源 内 容 


_UupdateLocalstorage(scriptPath, content); 


}); 
}else if('!oldVersion){ 
// 本 地 没有 缓存 则 直接 获取 最 新 全 量 文件 
$.ajax({ 
url: ‘${scriptPath}main.${newVersion}.js ， 
type: 'get', 
dataType: 'text', 


success: function(content)t{ 


Script,InnerHTML = content 
document .appendCchild(script)， 
// 更 新 localStorage 静态 资源 内 容 


_UupdateLocalstorage(scriptPath, content); 


}); 

}elsef 
// 如 果 有 缓存 且 没 有 版 本 更 新 ， 则 直接 读 取 缓 存 内 容 
script.innerHtml = localStorage.getIitem(scriptPath); 
document .appendCchild(script); 

} 


</script> 


通过 比较 不 同 版 本 就 可 以 只 加 载 不 同 版 本 的 增 量 文件 ， 但 同时 需 
要 在 服务 器 端 每 次 新 版 本 发 布 时 维护 多 个 增 量 文件 来 适应 不 同 的 旧版 
本 更 新 的 需要 。 至 于 如 何 根据 两 个 新 旧版 本 的 文件 生成 字符 级 的 增 量 
文件 ， 这 就 是 我 们 下 面 要 继续 讨论 的 内 容 了 ， 目 前 主要 有 两 种 基本 的 
算法 来 实现 这 一 过 程 。 


基于 文件 代码 分 块 的 增 量 更 新 机 制 


这 种 思路 是 基于 代码 文件 分 块 更 新 的 增 量 算法 ， 如 图 6-13 所 示 ， 
main.1.3.js 的 文件 字符 串 由 几 个 字符 串 块 连接 组 成 ，chunk1l-chunk2- 
chunk3-chunk4 《每 个 chunk 代 表 分 割 后 不 同 的 代码 字符 串 ) ， 此 时 需 
要 在 chunk1 和 chunk2 之 间 添 加 datal ，chunk3 的 内 容 被 修改 成 了 chunk5， 
chunk4 的 块 被 删除 。 新 的 代码 文件 字符 串 应 该 为 counk1-datal-chunk2- 
chunk5。 为 了 解决 这 个 问题 ， 我 们 用 一 种 描述 规则 来 表示 每 个 代码 文 


件 块 的 变化 ， 比 如 使 用 原 有 的 序号 1 表示 原来 chunk1 的 内 容 不 变化 ， 加 
入 datal 块 内 容 表 示 插 入 的 新 内 容 ，-4 表 示 删 除 chunk4 的 文件 块 ， 那 么 
就 可 以 用 数组 [1, datal, 2, chunk5,-4] 来 表示 新 的 增 量 文件 了 ， 具 体 表 
示 : chunk1 未 修改 ， 后 面 拼接 datal1，chunk2 未 修改 ，chunk3 被 移 除 ， 
ee chunk4 被 移 除 掉 。 当 浏览 器 下 载 到 带 有 这 个 版 本 的 
增 量 文件 时 ， 就 会 在 前 一 版 本 的 代码 文件 字符 串 上 根据 这 个 规则 修 
改 ， 得 到 更 新 后 的 静态 资源 文件 字符 串 内 容 并 重新 写 入 到 localStorage 


中 。 
main. 1. 3. js chunk2 chunk3 chunk4 


增 量 描述 1 datal 2 chunk5 -4 


ne 四 


图 6-13 ”基于 分 块 的 增 量 文件 算法 思路 


我 们 再 来 看 一 个 具体 的 例子 ， 新 旧 两 个 版 本 的 JavaScript 文 件 压 缩 
后 上 线 的 代码 字符 捉 分 别 为 leta=1;alert(a); 和 let a=1;alert(a+1); ， 我 
们 根据 块 大 小 为 4 个 字 a 可 以 得 到 如 图 6-14 所 示 的 表示 ， 所 以 
计算 获取 的 增 量 内 容 描述 为 [1,2,3,t (a+', '1) ; ]。 这 种 方式 在 代码 较 
多 的 情况 下 就 可 以 用 块 序 号 来 描述 不 变 的 代码 块 ， 减 小 增 量 文件 大 
小 ， 达 到 节省 流量 的 目的 。 


而 有 ee a=1; aler t (a) : 


增 量 描述 时 到 医 习 区 到 区 到 区 到 
main. 1. 4. js | ee | | [5 | 


图 6-14 ”基于 分 块 的 增 量 文件 算法 案例 


基于 编辑 距离 的 增 量 更 新 机 制 


前 一 种 方法 是 基于 文件 内 容 分 块 chunk 算 法 来 进行 增 量 更 新 的 ， 节 
省 资源 的 量 取决 于 块 的 大 小 和 内 容 变 化 的 块 序号 分 布 ， 比 如 每 个 块 中 
都 只 更 新 了 一 个 字符 ， 那 么 仍然 需要 下 载 这 个 文件 的 所 有 块 内 容 。 而 
根据 编辑 距离 算法 增 量 更 新 的 方式 就 可 以 真正 做 到 字符 级 别 的 更 新 
了 。 


1965 年 俄罗斯 科学 家 Vladimir Levenshtein 提出 了 Levenshtein 
Distance (编辑 距离 ， 相 关 算 法 的 实现 内 容 比较 多 ， 有 兴趣 可 以 参考 其 
他 资料 ) 的 概念 ， 它 指 的 是 从 一 个 字符 串 变 换 到 另 一 个 字符 串 所 需要 
的 最 少 变 化 操作 步 又 。 那 如 果 能 计算 获取 两 个 文件 对 比 变 化 时 每 个 字 
符 的 操作 步 又 ， 就 可 以 将 操作 步骤 作为 增 量 文件 下 载 ， 然 后 在 浏览 
端 进行 代码 的 运算 更 新 了 。 不 过 这 种 情况 对 于 少量 的 字符 更 新 很 有 
用 ， 如 果 一 次 更 新 的 内 容 很 多 ， 生 成 的 增 量 文件 很 有 可 能 比 源 文 件 还 
大 ， 所 以 实际 使 用 过 程 中 需要 结合 具体 情况 在 这 两 种 增 量 算法 实现 中 
进行 选择 。 


6.2.4 ”基于 Native 与 Web 的 资产 离线 
和 更 新 技术 


Native 和 Web 结 合 的 Hybrid 资源 离线 与 更 新 


接 下 来 介绍 另 一 种 Hybrid 应 用 上 的 离线 实现 机 制 ， 与 1ocalStorage 
上 实现 文件 资源 离线 的 方式 不 同 的 是 ， 在 这 种 Native 和 Web 结 合 的 
Hybrid 开发 模式 下 ，Web 端 的 代码 资源 是 通过 离线 包 的 方式 发 布 到 服 
务 端 静 态 目录 上 的 ， 同 时 主 站 点 会 保存 一 个 线 上 的 前 端 页 面 实现 供 浏 
览 器 直接 加 载 使 用 。 


如 图 6-15 所 示 ， 通 常 Native 应 用 启动 时 会 主动 拉 取 线 上 Web 离 线 包 
版 本 ， 然 后 与 本 地 保存 的 版 本 进行 对 比 ， 如 果 没 有 更 新 则 不 做 操作 ; 
如 果 本 地 的 离线 包 需 要 更 新 或 者 本 地 没有 离线 包 ， 则 会 去 离线 包 服 务 
器 拉 取 最 新 的 离线 包 或 者 拉 取 增 量 离线 包 到 本 地 ， 然 后 解压 合并 到 本 
地 的 指定 离线 包 目 录 下 。 当 有 用 户 访 问 目标 页 面 时 ，Native 应 用 会 先 
检查 该 文件 地 址 映射 到 的 离线 包 本 地 目录 中 的 文件 ， 如 果 离 线 包 目录 
有 内 容 ， 则 直接 读 取 离 线 包 目录 的 文件 加 载 ; 否则 线 上 拉 取 静态 资源 
到 页 面 上 解析 执行 ， 同 时 通知 Native 应 用 去 拉 取 最 新 的 离线 包 资 源 ， 
这 样 当 下 一 次 继续 请 求 目 标 页 面 时 WebView 就 可 以 读 取 到 本 地 离线 目 
录 中 的 内 容 了 。 这 也 就 是 为 什么 通常 我 们 拉 取 到 的 新 离线 包 需 要 在 下 
一 次 访问 才 生 效 的 原因 。 另 外 ， 对 于 离线 包 的 更 新 检查 时 机 ， 也 有 的 
应 用 设计 是 在 打开 目标 页 面 时 ， 无 论 是 否 加 载 到 离线 内 容 ， 都 会 去 检 
测 是 否 下 载 新 的 离线 包 资 源 。 


前 端 离线 包 的 生成 比较 简单 ， 一 般 是 通过 构建 工具 将 站 点 资源 目 
录 直 接 压 缩 ， 在 发 布 前 端 页 面 与 静态 资源 的 同时 上 传 离线 包 到 服务 器 
或 CDN 上 。 这 里 需要 注意 的 是 ， 为 了 保证 移动 端 应 用 每 次 尽 可 能 拉 到 
较 小 的 离线 包 内 容 ， 上 传 服务 器 端 离线 包 时 也 需要 生成 与 之 前 版 本 对 
比 的 增 量 更 新 包 发 布 到 服务 器 或 CDN 上 的 。 


增 量 包 的 计算 方法 与 localStorage 的 增 量 文件 计算 方法 类 似 ， 如 
6-16 所 示 ， 假 如 有 1.1、1.2、1.3 三 个 版 本 的 离线 包 ， 当 1.4 版 本 的 离线 
包 上 传 后 ， 需 要 对 比 前 面 三 个 版 本 的 离线 包 内 容 分 别 生成 三 个 不 同 版 
本 的 新 增 量 包 ， 同 时 保留 1.4 版 本 的 全 量 离线 包 。 此 时 服务 器 上 1.4 版 本 
发 布 后 就 存在 四 个 离线 包 : 1.4 版 本 全 量 包 、 相 对 于 1.1 版 本 的 增 量 包 、 
相对 于 1.2 版 本 的 增 量 包 、 相 对 于 1.3 版 本 的 增 量 包 。 这 样 新 用 户 进 入 应 
用 会 直接 拉 取 1.4 版 本 全 量 离线 包 、 前 三 个 版 本 的 用 户 拉 取 的 则 分 别 是 
三 个 不 同 的 增 量 包 。 这 样 不 同 版 本 的 用 户 更 新 就 没有 问题 了 。 人 至 于 如 
何 根据 两 个 离线 包 计 算 增 量 包 的 算法 也 和 计算 差 量 文件 的 算法 类 似 ， 
既 可 以 根据 增 量 包 内 每 个 文件 资源 的 增 量 文件 来 计算 ， 计算 方法 和 
localStorage 实 现 增 量 文件 的 方法 类 似 ， 也 可 以 通过 直接 针对 压缩 包 文 
件 二 进 制 数据 内 容 分 块 进行 对 比 的 增 量 方法 来 实现 。 


检测 资源 包 版 本 


拉 取 新 版 本 离线 
包 到 本 地 


WE 人 并 有 


加 载 线 上 站 
点 页 面 


读 取 本 地 离 
线 资 源 


图 6-15“” 增 量 包 更 新 机 制 


图 6-16 ” 增 量 包产 生 算 法 


到 此 ， 离 线 包 的 运行 思路 已 经 分 析 完 了 。 很 多 情况 下 ， 尤 其 是 在 
大 的 互联 网 公司 中 ， 这 些 内 容 基 本 是 后 端 或 之 前 的 同学 已 经 设计 好 
的 ， 但 是 我 们 也 要 理解 ， 如 果 是 自己 搭建 实现 这 个 流程 的 话 ， 各 个 环 
节 应 该 怎样 去 做 ， 这 是 很 重要 的 。 


6.2.5 ”资源 覆盖 率 统计 


上 面 讲 到 ， 既 然 有 了 前 端 资源 的 离线 和 更 新 机 制 ， 那 就 要 考虑 在 
每 次 新 资源 包 发 布 后 统计 新 版 本 的 更 新 覆盖 率 。 这 和 没有 离线 的 时 候 
是 有 区 别 的 ， 前 端 发 布 的 新 版 本 常常 会 在 用 户 拉 取 到 线 上 新 版 本 资源 


后 的 第 二 次 访问 时 才 生 效 ， 那 么 在 新 的 资源 发 到 服务 器 上 后 ， 用 户 客 
户 端 里 面 可 能 仍 会 存在 旧版 本 的 运行 代码 逻辑 ， 这 就 需要 知道 有 多 少 
用 户 已 经 更 新 到 了 新 的 版 本 。 在 增 量 包 的 生成 过 程 中 ， 如 果 某 个 旧版 
本 的 用 户 使 用 率 已 经 很 小 ， 或 者 基本 接近 0， 那 我 们 就 可 以 考虑 后 面 不 
再 对 这 个 版 本 生成 增 量 包 ， 并 让 这 部 分 用 户 直 接 拉 取 最 新 的 全 量 包 ， 
避免 在 版 本 发 布 较 多 时 线 上 有 过 多 的 历史 增 量 包 版 本 存在 。 因 此 ， 统 
计 离 线 包 资源 履 盖 率 是 很 有 意义 的 。 


统计 的 方法 很 多 ， 一 个 简单 可 行 的 方式 就 是 后 台 统 计 上 报 版 本 
号 。 为 了 更 加 直接 地 体现 版 本 分 布 的 情况 ， 我 们 可 以 忽略 用 户 量 上 的 
统计 ， 直 接 对 访问 量 进行 计算 。 在 发 布 了 新 版 本 后 ， 每 次 PV 统计 时 市 
上 版 本 号 ， 最 后 根据 PV 中 的 版 本 号 来 统计 访问 不 同 版 本 上 用 户 的 分 布 


情况 。 


图 6-17 显 示 了 根据 PV 中 的 版 本 信息 计算 得 到 目前 五 个 版 本 的 大 致 
用 户 比 例 。 对 于 1.0 版 本 ， 由 于 用 户 的 使 用 比例 已 经 较 小 ， 可 以 考虑 让 
这 部 分 用 户 拉 取 离 线 包 信息 时 直接 获取 最 新 的 离线 包 资源 ， 而 且 后 面 
的 新 版 本 发 布 将 不 再 对 1.0 版 本 生成 新 的 增 量 包 。 需 要 注意 的 是 ， 新 版 
本 覆盖 率 可 能 出 现 不 同 的 分 布 ， 例 如 今天 统计 的 新 版 本 覆盖 率 比 昨天 
还 要 低 ， 这 是 很 正常 的 ， 因 为 很 多 新 的 用 户 在 今天 的 访问 量 减少 ， 而 
老 用 户 访问 较 多 ， 但 是 整体 上 新 版 本 覆盖 率 是 会 呈现 不 断 上 升 然后 开 
始 下 降 的 趋势 ， 我 们 通常 将 某 版 本 以 上 的 覆盖 率 总 和 超过 95% (当然 
这 个 值 根 据 不 同业 务 的 场景 可 以 自己 定义 ， 而 且 尽 量 不 要 去 统计 单个 
版 本 的 覆盖 率 情况 ) 时 认为 是 该 版 本 覆盖 完成 ， 而 将 该 版 本 发 布 时 起 
到 该 版 本 以 上 版 本 覆盖 率 总 和 超过 95% 的 这 上段 时 间 称 为 离线 包 的 更 新 
周期 。 


通过 离线 包 覆 盖 率 的 统计 ， 我 们 可 以 很 清晰 地 了 解 之 前 版 本 的 用 
六 


二 
户 履 盖 情况 ， 也 有 助 于 进行 产品 的 完善 和 改进 。 


OO 


| + 


版 本 1. 


pt 


| 12% 版 本 1.2 


lx; 


版 本 1. 4 


上 小 


图 6-17 增 量 包 统 计 示 例 


6.2.6 ” 仍 需 要 注意 的 问题 


离线 缓存 的 实现 能 够 解决 加 速 页 面 内 容 加 载 的 问题 ， 尽 管 如 此 ， 
我 们 依然 需要 注意 一 些 Hybrid 应 用 开发 时 的 其 他 问题 。 


Hybrid 性 能 问题 


了 解 过 Hybrid 之 后 ， 你 会 发 现 Hybrid 应 用 的 webView 存 在 另 一 个 
性 能 问题 HIML 的 DOM 泻 染 和 操作 较 慢 。 需 要 注意 的 是 ， 这 里 所 说 
的 慢 是 相对 的 ， 是 Native 应 用 WebView 内 容 操作 相对 于 移动 端 浏览 
的 内 容 操作 来 说 的 ， 即 便 我 们 把 前 端 优化 做 到 极致 ，HTML DOM 的 运 
行 机 制 较 慢 仍 是 不 可 改变 的 。 值 得 庆幸 的 是 ， 目 前 MNV 米 的 开发 模式 
正在 改变 这 一 局 面 ， 前 面 也 讲 到 ， 它 允许 我 们 通过 JavaScript 来 调用 
Native 的 原生 控件 生成 界面 ， 并 能 尽量 接近 Native 应 用 的 性 能 ， 这 也 在 
一 定 程度 弥补 了 Hybrid 应 用 内 容 泻 染 过 程 中 的 性 能 劣势 。 


前 端 技 术 栈 的 其 他 应 用 实现 


前 端 技术 栈 还 有 一 些 其 他 的 应 用 方式 ， 如 Native 编 译 技术 或 者 桌 
面 应 用 开发 。 


Native 编 译 扩 术 指 的 是 使 用 前 端 技术 编译 生成 Native 应 用 开发 工 
程 ， 例 如 可 以 生成 Android 或 iOS 原 生 项 目 工 程 ， 再 进行 二 次 开发 编译 
打包 成 最 终 的 Native 客 户 端 版 本 。 前 端 技 术 在 桌面 端 应 用 的 开发 场景 
也 在 不 断 增多 ， 有 一 些 相 对 较 成 熟 的 框架 和 相关 资料 ， 实 现 也 比较 简 
单 ， 有 实际 需求 的 读者 可 以 去 尝试 一 下 。 


6.3 ”本 章 小 结 


在 这 一 章 中 ， 我 们 向 大 家 介绍 了 前 端 技术 在 Node 端 和 客户 端的 应 
用 ， 主 要 包括 后 端 泻 染 、 前 后 端 同 构 、Hybrid App 离 线 技术 与 统计 等 
内 容 。 掌 握 这 些 将 有 利于 前 端 工程 师 应 对 更 多 的 应 用 场景 ， 在 更 复杂 
的 业务 应 用 中 灵活 选择 实践 方案 。 到 此 为 止 ， 本 书 要 讲解 的 前 端 知识 


内 容 已 经 介绍 完毕 ， 在 下 一 章 中 ， 我 们 将 一 起 来 看 看 未 来 前 端 技术 的 
发 展 趋势 以 及 如 何 成 为 一 名 优秀 的 前 端 工程 师 。 


第 7 章 ”未 来 前 端 时 代 


到 了 这 里 ， 本 书 要 向 大 家 介绍 的 技术 内 容 基 本 就 讲解 完了 。 这 一 
章 我 们 再 一 起 来 展望 一 下 未 来 前 端 领域 可 能 的 发 展 情况 。 


就 前 端 主流 技术 框架 的 发 展 而 言 ， 其 过 去 几 年 发 展 极 快 ， 在 填补 
了 原 有 技术 框架 空白 和 不 足 的 同时 也 渐渐 趋 于 成 熟 。 未 来 前 端 在 已 经 
趋向 成 熟 的 技术 方向 上 面 将 会 慢 慢 稳定 下 来 ， 进 入 技术 迭代 优化 阶 
段 ， 例 如 语言 标准 、 前 端 框架 等 。 但 这 并 不 代表 前 端 领域 技术 就 此 稳 
定 了 ， 因 为 新 的 技术 方向 已 经 出 现 ， 并 在 等 待 着 下 一 个 风口 的 到 来 。 
那么 什么 是 下 一 个 风口 呢 ? 虚拟 现实 ? 人 工 智能 ? 还 是 其 他 的 什么 ? 
不 管 未 来 如 何 ， 就 前 端 应 用 开发 方向 来 讲 ，MVVM、Virtual DOM 和 
同 构 的 技术 解决 方案 依然 会 延续 发 展 一 段 时 间 ， 而 且 这 段 时 间 内 前 端 
框架 技术 的 变化 将 不 会 像 原 来 一 样 具有 颠 覆 性 。 


当 MVVM、 Virtual DOM 或 同 构 等 技术 实践 都 有 很 成 熟 高 效 的 框 
架 和 方案 可 以 实现 时 ， 对 于 移动 端 应 用 ， 前 端 要 重点 发 展 的 下 一 步 可 
能 束 是 MNV 米 的 原生 NativeView 开 发 ， 例 如 使 用 通用 的 MNV 米 前 端 技 
术 实 现 方案 来 降低 移动 端 Native 和 前 端 Web 交 互 的 开发 成 本 ， 让 前 端 既 
可 以 通过 Native 编 译 开 发 出 稳定 的 原生 应 用 外 壳 ， 也 可 用 来 开发 快速 
迭代 、 高 性 能 的 移动 端 MNV* 应 用 ， 最 终 形 成 一 套 移动 端 高 效率 的 前 
端 开 发 生态 体系 。 


另 一 方面 ， 新 领域 的 web 化 思路 也 会 给 前 端 带 来 技术 革新 和 发 展 
机 遇 ， 例 如 web 虚拟 现实 (Virtual Reality，VR) 、 物 联网 (Physical 
Web， 将 物体 连 入 网 络 的 一 种 理念 ) Web 化 、 网 站 人 工 智 能 等 ， 这 些 
方向 的 开发 者 早已 跃跃欲试 ， 目 前 国外 也 能 找到 少数 这 样 的 应 用 站 
点 


NO 


7.1 未 来 前 端 趋势 


经 过 近 几 年 的 发 展 ， 现 代 前 端 已 经 革新 到 跨 端 、 跨 界面 的 阶段 ， 
主流 以 基于 MVVM、Virtual DOM、 移动 端 MNV 米 思路 和 前 后 端 同 构 
技术 进行 开发 的 项 目 居多 ， 实 现 的 方向 也 多 种 多 样 ， 这 些 在 前 面 对 应 
的 章节 中 均 有 讲 到 。 除 了 这 些 ， 关 于 未 来 还 有 一 些 是 我 们 前 端 工 程 师 
需要 了 解 的 ， 下 面 一 起 来 看 看 未 来 前 端 技 术 具 体 可 能 会 发 展 成 什么 
样 。 


7.1.1 新 标准 的 进化 与 稳定 


前 端 新 标准 和 草案 在 不 断 更 新 ，HTML、CSS、JavaScript 标 准 也 
在 渐渐 完善 ， 尽 管 这 些 新 的 规范 最 终 会 淘汰 旧 标 准 ， 新 的 项 目 也 会 以 
最 新 的 标准 作为 开发 依据 ， 但 要 完全 停止 日 标准 的 使 用 并 完成 企业 级 
旧 项 目的 升级 ， 依 然 需 要 一 段 时 间 。 例 如 原 有 CoffeeScript 的 项 目 不 可 
能 一 次 性 做 出 迁移 重 构 ， 我 们 的 项 目 仍 需要 维护 ， 不 能 脱离 实际 项 目 
去 谈 技 术 ， 这 就 需要 一 段 时 间 来 慢 慢 修改 ; 再 如 Web Component 也 不 
会 马上 作为 唯一 标准 被 大 力 推广 。 但 可 以 肯定 的 是 ， 新 的 语言 或 技术 
标准 一 定 会 被 推广 使 用 ， 只 是 还 需要 时 间 。 


同时 基于 标准 也 会 出 现 一 些 衍生 的 脚本 语法 和 规范 来 适应 特定 的 
应 用 场景 ， 这 些 非 标准 的 规范 除了 解决 具体 业务 技术 问题 之 外 ， 极 有 
可 能 进化 成 下 个 标准 的 一 部 分 或 被 新 的 标准 借鉴 。 例 如 CoffeeScript 虽 
然 最 终 没有 形成 JavaScript 开 发 标准 ， 但 ECMAScript 6 却 借 鉴 了 其 中 很 
多 优秀 的 特性 。 目 前 生成 Virtual DOM 的 衍生 脚本 语法 ， 未 来 也 是 有 可 
能 被 列 入 到 JavaScript 标 准 当 中 的 。 


经 过 大 版 本 的 更 新 稳定 ， 目 前 前 端 三 层 结 构 实 现 已 经 处 于 
HTML5、CSS3、ECMAScript 6+ 标 准 规 范 结 合 的 阶段 ， 后 面 标准 的 新 
变化 也 会 越 来 越 小 。 至 少 迄 今 为 止 ， 我 们 无 法 预见 HTML6 的 到 来 ， 
CSS4 的 特性 也 令 人 担忧 ，ECMAScript 7 的 特性 更 新 也 并 不 明显 ， 这 都 
显示 出 目前 前 端 项 目 实践 规范 将 会 相对 稳定 一 段 较 长 的 时 间 ， 后 面 的 
修改 不 会 像 之 前 一 样 具有 颠覆 性 ， 这 也 是 技术 标准 发 展 到 一 定 成 熟 阶 
段 必然 发 生 的 事情 。 


7.1.2 ”应 用 开发 技术 趋 于 稳定 并 将 等 
待 下 一 次 革新 


前 端 应 用 开发 框架 先后 经 历 了 DOM API、 MVC、MVP、 
MVVM、Virtual DOM、MNV 炒 阶段 ， 逐 步 解 决 了 前 端 开 发 效率 、 设 
计 模 式 、DOM 交 互 性 能 中 存在 的 问题 。 这 些 问题 处 理 完成 后 ， 相 关 的 
框架 也 会 进入 稳定 发 展 、 版 本 有 序 迭 代 的 时 期 ， 也 就 是 说 前 端的 交互 
框架 不 会 像 以 前 那样 变化 频繁 。 但 目前 前 端 可 能 还 有 一 件 需要 去 做 的 
事情 ， 就 是 使 用 前 端 技 术 栈 独立 开发 Native 应 用 的 能 力 ， 如 果 做 到 这 
点 ， 前 端 开 发 者 就 可 以 结合 MNV 米 开发 模式 独立 进行 Native 应 用 开发 
并 快速 实现 高 性 能 的 移动 端 应 用 了 。 因 为 目前 的 MNV 米 框架 的 设计 实 


现 依然 依赖 少数 几 个 已 有 的 成 熟 Native 应 用 的 运行 环境 ， 还 做 不 到 在 
通用 的 APP 上 用 前 端 技术 栈 直接 调用 移动 设备 原生 API。 但 如 果 前 端 技 
术 栈 具备 了 通用 的 Native 开 发 能 力 ， 技 术 上 也 就 意味 着 JavaScript 脚 本 
(或 是 衍生 的 其 他 脚本 ) 可 以 将 任何 一 个 普通 的 移动 端 应 用 编译 打包 
成 为 Native 包 ， 并 能 使 用 MNV* 模 式 直 接 与 移动 设备 原生 API 进 行 交 
互 。 目 前 也 有 框架 在 做 这 方面 的 尝试 ， 但 还 不 理想 ， 仍 需要 更 多 的 改 
进 完善 。 但 无 论 如 何 ， 前 端 技术 栈 的 Native 开 发 实现 技术 必 将 成 为 前 
端 技术 的 下 一 个 实践 核心 。 


7.1.3 ”持续 不 断 的 技术 工具 探索 


前 端 技术 效率 和 性 能 的 提升 当然 不 是 仅 靠 前 端 框架 就 能 解决 的 ， 
还 需要 其 他 各 方面 辅助 工具 的 支持 ， 例 如 高 效 的 调试 工具 、 构 建 自动 
化 工具 、 自 动 发 布 部 署 工具 等 。 所 以 未 来 前 端 发 展 过 程 中 各 种 高 效 工 
具 仍 会 不 断 出 现 ， 解 决 特定 场景 下 的 问题 ， 最 后 完成 一 个 优胜 劣 状 的 
过 程 。 


7.1.4 浏览 器 平台 新 特性 的 应 用 


就 浏览 器 端 应 用 而 言 ， 以 Chrome 为 代表 的 浏览 器 版 本 和 特性 发 展 
迭代 极其 迅速 ， 经 过 多 版 本 的 迭代 ， 浏 览 器 上 已 经 可 以 实现 较 多 的 增 
强 和 实用 特性 ， 例 如 Web Component、 Service Worker、IndexDB、 
WebAssembly、WebRTC、ECMAScript 6 十 的 支持 等 ， 但 由 于 浏览 器 的 
种 类 和 版 本 多 样 ， 我 们 还 不 能 在 业务 中 直接 推广 使 用 这 些 新 的 特性 ， 


但 这 些 特性 仍然 给 了 我 们 很 多 实现 未 来 技术 的 可 能 ， 并 且 示 来 较 多 技 
术 会 在 这 些 新 特性 的 基础 上 进行 优化 或 改进 产生 。 


7.1.5 ”更 优化 的 前 端 技术 开发 生态 


贯穿 浏览 器 、 服 务 端 和 移动 端 ， 前 端正 朝 着 多 端 、 多 技术 实现 的 
方向 发 展 。 这 意味 着 前 端 这 套 技术 栈 能 做 的 事情 可 能 更 多 ， 涉 及 的 平 
台 更 广 。 但 作为 整套 技术 开发 生态 的 一 部 分 ， 每 一 项 技术 的 出 现 都 必 
须要 考虑 开发 效率 、 维 护 成 本 、 性 能 、 扩 展 性 这 几 个 方面 的 问题 ， 所 
以 寻找 并 发 展 更 优 的 开发 生态 体系 仍 是 未 来 前 端 技术 的 大 方向 ， 对 于 
新 技术 的 出 现 ， 我 们 也 会 从 以 下 几 个 方面 去 评价 它 的 意义 。 


1. 开发 效率 。 通 常 提高 开发 效率 的 方式 就 是 使 用 开发 框架 。 例 如 
DOM 编 程 框架 简化 了 脚本 API 的 使 用 、 提 高 了 代码 复 用 性 ， 选 择 好 的 
框架 常常 能 让 我 们 事半功倍 。 


2. 维护 成 本 。 使 用 框架 提高 了 项 目的 开发 效率 ， 但 却 并 不 能 解决 
代码 维护 的 问题 。 这 就 需要 借助 合适 的 模式 来 管理 项 目 开发 的 代码 ， 
降低 项 目的 维护 成 本 ， 例 如 提取 公共 业务 基础 库 、 模 块 化 、 组 件 化 
等 。 目 前 最 佳 的 实践 可 能 就 是 组 件 化 了 ， 让 业务 模块 的 实现 和 管理 有 
章 可 循 ， 同 时 这 也 是 web 标 准 未 来 发 展 的 需要 。 


3. 性 能 。 从 前 端 开发 框 染 的 演进 来 说 ， 可 以 总 结 为 先 专注 于 解决 
前 端的 开发 效率 问题 ， 然 后 解决 前 端的 交互 性 能 问题 ， 再 去 尝试 打通 
Native 开 发 的 能 力 。 所 以 性 能 将 作为 未 来 评价 任何 一 个 框 以 或 技术 优 
劣 性 的 重要 标准 ， 同 时 也 将 是 一 个 无 法 避 开 的 永久 性 话题 。 


4. 扩展 性 。 其 实 扩展 性 并 不 只 是 框架 的 方便 定制 和 扩展 特性 ， 还 
要 考虑 是 否 能 与 原来 的 技术 框架 相 兼 容 并 解 厅 合 。 例 如 要 使 用 某 个 新 
技术 对 原 有 的 业务 做 改造 ， 我 们 不 可 能 马上 融 替 换 近 所 有 的 业务 模 
块 ， 不 能 因为 新 增加 的 技术 框架 实现 而 导致 日 的 模块 运行 出 现 问题 。 
所 以 在 新 技术 的 应 用 中 ， 除 了 保证 原 有 业务 层 的 扩展 兼容 ， 实 现 功 能 
的 平滑 过 涛 也 是 一 个 必须 考虑 的 问题 。 


7.1.6 ”前 端 新 领域 的 出 现 


除了 目前 浏览 器 、 服 务 器 、 移 动 端 上 的 应 用 开发 技术 变革 和 探索 
外 ， 未 来 前 端 也 会 出 现 新 的 应 用 场景 ， 例 如 VR、 物 联网 Web 化 、Web 
人 工 智 能 等 。 这 些 虽 然 听 着 比较 远 ， 但 一 旦 到 来 就 会 很 快 被 使 用 ， 所 
以 前 端 不 仅 自 身 发 展 快 ， 推 广 使 用 也 极其 迅速 ， 例 如 移动 互联 网 Web 
的 普及 也 束 两 三 年 时 间 ]。 


近 几 年 ，Web VR 和 物 联 网 Web 化 的 概念 渐渐 出 现 ， 国 外 甚至 出 现 
了 以 人 工 智能 为 支撑 的 Web 应 用 。 


首先 ， 物 联网 Web 化 是 随 着 传统 软件 管理 的 Web 化 管理 而 出 现 
的 ， 目 的 是 为 了 通过 Web 手 段 管 理 传统 可 控 的 智能 设备 ， 当 然 这 里 不 
想 去 吹捧 物 联 网 的 终极 目标 到 底 有 多 美好 ， 只 是 提出 了 物 联网 Web 化 
的 可 能 性 。 可 以 肯定 的 一 点 是 ， 人 类 目前 所 有 工具 类 物体 的 Web 化 控 
制 都 是 可 能 的 ， 只 是 现在 去 做 有 一 定 的 代价 和 风险 存在 ， 和 毕竟 使 用 传 
统 的 软件 控制 到 目前 为 止 还 没有 遇 到 大 的 瓶颈 。 物 联网 未 来 的 发 展 其 
实 就 是 智能 设备 ， 通 过 控制 这 些 智 能 设备 来 完成 人 类 不 容易 完成 的 事 
情 ， 如 果 在 智能 设备 系统 中 融入 人 工 智能 的 控制 ， 这 样 的 设备 也 就 可 


以 理解 成 机 器 人 了 。 而 物 联 网 web 化 就 是 通过 Web 的 媒介 来 展示 和 控 
制 这 些 智 能 设备 的 技术 ， 尽 管 目前 来 看 这 还 比较 遥远 。 


其 次 ， 在 Web VR 方 面 ， 目 前 Firefox 和 Google Chrome 也 正在 联合 
推广 这 一 特性 使 浏览 器 支持 ， 相 信 在 浏览 器 端 体 验 VR 的 时 代 也 离 我 们 
不 远 了 。 不 过 就 目前 而 言 ， 软 件 服 务 的 虚拟 现实 技术 的 提升 空间 仍然 
很 大 ， 而 且 VR 涉 及 的 内 容 很 广泛 ， 现 在 涉及 最 多 的 也 只 是 VR 视 频 
类 ， 还 有 体感 类 、 环 境 类 的 应 用 场景 尚 待 开发 。 不 过 Web VR 的 提出 无 
疑 也 为 前 端 技术 发 展 提 供 了 一 个 可 能 的 方向 ， 例 如 目前 VR 直播 也 成 为 
了 一 个 行业 内 的 热点 技术 ， 而 且 极 有 可 能 成 为 一 种 新 的 媒体 内 容 表 现 
形式 出 现在 用 户 浏览 器 上 。 就 目前 Web 端 内 容 展 示 来 说 ， 其 形式 主要 
包括 页 面 3D 展 示 和 VR 展示 两 方面 ，3D 展 示 是 指 通 过 3D 的 画面 来 展示 
要 显示 的 内 容 ， 目 前 浏览 器 上 主要 以 three.js 的 实现 为 代表 ， 而 VR 展示 
内 容 则 通常 是 需要 通过 VR 头 备 配 合 完成 页 面 上 阅读 的 3D 内 容 。 所 以 
现 有 一 些 例如 aframe 等 Web VR 的 框架 主要 是 在 three.js 的 基础 上 构建 
的 。 


<script src="js/three.min.]js"></script> 
<script> 
let scene, camera, renderer; 


let geometry, material, mesh; 


init(); 


animate( )， 


function init() { 


Scene = new THREE. Scene(); 


camera = new THREE.PerspectiveCamera( 75, window.innerwidth 
/ window.innerHeight, 1, 
10000 ); 


camera.position.z = 1000; 


geometry = new THREE.BoxGeometry( 200, 200, 200 ); 
material = new THREE.MeshBasicMaterial( { color: Oxff0000, 


wireframe: true } ); 


mesh = new THREE.Mesh( geometry, material ); 


scene.add( mesh ); 


renderer = new THREE .WebGLRenderer(); 


renderer.setSize( window.innerwidth, window.innerHeight ); 


document .body.appendChild( renderer.domElement ); 


function animate() { 
requestAnimationFrame( animate ); 
mesh.rotation.x += 0.01; 


mesh.rotation.y += 0.02; 


renderer.render( scene, camera ); 


} 


</script> 


这 段 代 码 是 three.js 提 供 的 一 个 官方 例子 ， 它 可 以 创建 一 个 场景 、 
一 个 摄像 机 和 一 个 立方 体 ， 并 将 立方 体 添 加 到 场景 中 ， 然 后 通过 
WebGL 来 完成 泻 染 并 展示 立方 体 的 动画 。 对 这 方面 有 兴趣 的 读者 可 以 
继续 进行 更 深入 的 研究 。 


另外 ， 你 应 该 听 说 过 入 工 智能 ， 不 过 你 可 能 不 知道 Web 和 人 工 智 
能 是 怎么 结合 的 。 早 在 2011 年 就 有 人 提出 了 Web 与 人 工 智能 商业 化 结 
合 的 可 能 性 ， 结 合 Web 端 的 人 机 交互 与 后 台 的 机 器 学 习 ， 相 信 这 个 方 
向 未 来 又 将 催生 出 一 批 新 的 互联 网 企业 。 尽 管 目 前 国内 还 缺乏 较 多 的 
应 用 场景 ， 但 在 国外 已 经 存在 基于 人 工 智能 支撑 的 Web 应 用 来 为 人 们 
提供 服务 了 。 

可 以 认为 我 们 又 开始 进入 了 一 个 前 端 技术 的 过 渡 时 代 ， 现 有 前 端 
开发 技术 趋 渐 成 熟 ， 新 的 前 端 技术 领域 跃跃欲试 ， 可 以 肯定 的 是 物 联 
网 Web、Web VR、 人 工 智 能 必定 会 成 为 前 端的 下 一 批 革 命 性 技术 。 我 
们 需要 做 的 ， 仍 是 把 握 技 术 发 展 趋势 ， 紧 跟 领 域 前进 的 步伐 ， 在 漫漫 
前 端 道路 上 继续 前 进 。 


参考 资料 : https://aframe.io/; http://threejs.org/。 


7.2 ”做 一 名 优秀 的 前 端 工程 师 


本 书 在 前 面 的 章节 中 向 读者 讲解 了 近 几 年 来 前 端 业界 内 主流 的 开 
发 技术 ， 但 并 不 等 于 说 读 完 这 本 书 就 意味 着 你 已 经 掌握 了 前 端 领域 的 


所 有 知识 。 首 先 ， 本 书 以 原理 解析 和 体系 知识 分 析 为 主 ， 向 读者 们 讲 
解 了 前 端的 工程 和 技术 设计 思维 思路 ， 起 到 宏观 的 知识 体系 指导 作 
用 ， 而 并 不 是 深入 某 一 方面 进行 剖析 ， 主 要 目的 是 让 读者 了 解 前 端 技 
术 体 系 的 来 龙 去 脉 ， 知 道 前 端 每 一 次 技术 发 展 的 原因 ， 避 免 自己 只 在 
业务 代码 和 框架 中 折腾 。 其 次 ， 前 端 技术 的 革新 不 会 就 此 停止 ， 以 后 
依然 会 有 更 多 的 应 用 技术 出 现 ， 我 们 仍然 需要 在 掌握 现 有 知识 的 基础 
上 继续 学 习 探索 。 无 论 如 何 ， 要 成 为 一 名 优秀 的 前 端 工程 师 ， 我 们 仍 
需要 做 更 多 的 事情 。 


7.2.1 ”学 会 高 效 沟通 


学 会 高 效 沟 通 是 前 提 ， 在 前 面 的 章节 中 也 讲 到 过 ， 学 会 使 用 高 效 
的 沟通 方式 很 重要 。 简 单 来 说 ， 沟 通 就 是 通过 有 效 的 方法 手段 正确 地 
表达 目 己 或 理解 别人 观点 的 一 个 过 程 。 作 为 工程 师 我 们 不 仅 需 要 具备 
全 面 严 并 的 思维 逻辑 ， 良 好 的 沟通 能 力也 是 帮助 我 们 高 效 完成 工作 的 
一 项 必 不 可 少 的 技能 。 


7.2.2 ”使 用 高 效 的 开发 工具 


工 欲 善 其 事 必 先 利 其 器 ， 使 用 高 效 的 工具 能 节省 大 量 的 开发 时 
间 。 比 如 高 效 地 使 用 SVN/Git、 编 辑 器 辅助 插件 、 调 试 工具 、 构 建 工 
具 、 测 试 部 署 工 具 等 。 这 些 都 是 实际 工作 中 一 定 会 接触 到 的 ， 我 们 必 
须要 找到 一 个 清晰 的 思路 和 便捷 的 途径 去 运用 这 些 工 具 ， 例 如 快捷 键 
的 使 用 、 构 建 的 自动 化 程度 等 都 与 我 们 的 工作 效率 相关 。 所 以 ， 笔 者 


建议 尽 可 能 选择 自动 化 程度 更 高 的 工具 来 提高 效率 ， 减 少 重复 性 工 
作 。 


7.2.3 “处理 问题 方法 论 


作为 开发 者 ， 很 多 时 候 我 们 除了 开发 新 需求 ， 设 计 新 的 项 目 结 
构 ， 还 要 处 理 很 多 临时 的 问题 。 总 结 下 来 ， 这 些 问题 可 以 归 为 几 类 : 
业务 代码 类 问题 、 需 求 变更 或 需求 风险 类 问题 、 开 会 等 其 他 类 问题 。 
如 果 你 在 一 个 项 目 组 里 进行 团队 协作 ， 那 么 这 些 事情 一 定 会 发 生 而 且 
很 难 权衡 ， 很 占用 时 间 ， 一 旦 处 理 不 好 ， 就 很 可 能 陷入 困境 。 这 里 ， 
笔者 也 分 享 一 下 自己 处 理 这 些 问题 的 心得 。 


1. 代码 类 问题 


我 想 大 家 一 定 也 都 遇 到 过 因为 某 次 业务 代码 问题 或 者 业务 基础 公 
共 模 块 问题 ， 最 终 导 致 业务 数据 或 流程 不 正确 ， 需 要 紧急 处 理 。 这 里 
一 般 可 能 是 通过 产品 经 理 或 测试 人 员 反 馈 给 你 的 ， 遇 到 这 种 问题 时 既 
不 能 急躁 ， 也 不 能 盲目 地 去 修改 。 第 一 步 要 先 确 认 间 题 ， 就 是 弄 清 楚 
是 不 是 真正 的 问题 。 绝 大 部 分 情况 下 是 有 问题 的 ， 但 有 时 是 因为 产品 
经 理 需 求 的 策略 、 设 置 了 网 络 代 理 或 测试 方法 环境 等 导致 的 ， 所 以 这 
里 要 稍微 注意 一 点 。 要 确定 问题 也 很 简单 ， 看 能 否 复 现 就 知道 了 。 如 
果 确 实 有 问题 ， 那 么 第 二 步 要 确定 是 什么 问题 ， 可 能 是 代码 类 问题 ， 
也 可 能 是 产品 或 设计 考虑 不 全 面 的 问题 。 作 为 开发 者 ， 我 们 通常 只 能 
处 理 可 控 的 代码 类 问题 ， 如 果 问 题 不 在 自己 的 可 控 荡 围 内 就 要 尽快 沟 
通 有 反馈， 让 相关 人 员 做 出 修改 ， 如 果 确 认 是 因为 自己 开发 引起 的 ， 第 
三 步 就 要 想 想 解决 的 方法 了 。 如 果 问 题 修改 很 快 就 能 解决 ， 建 议 马 上 
进行 处 理 ; 如果 需 要 较 大 的 修改 工作 量 ， 就 要 考虑 下 解决 方案 性 价 比 


的 问题 了 ; 如 果 处 理 比 较 麻 烦 ， 建 议 通过 新 版 本 或 将 问题 独立 出 来 处 
理 ， 当 然 这 类 情况 通常 会 比较 少 。 


2. 需求 类 问题 


(1) 作为 开发 者 ， 我 们 遇 到 最 常见 的 需求 类 问题 可 能 就 是 变 

了 ， 原 因 是 大 多 产品 同学 一 般 不 了 解 技术 ， 对 需求 的 设计 实现 理解 有 
偏差 、 需 要 调整 修改 。 遇 到 这 类 问题 也 不 能 急躁 ， 依 然 是 分 步 来 应 
对 ， 首 先 不 要 直接 爽快 地 接受 需求 变更 ， 而 是 评估 需求 的 等 级 : 如 果 
是 一 些小 的 问题 不 会 伦 太 多 时 间 ， 那 么 建议 先 接受 确认 修改 ; 当然 也 
不 排除 会 带 来 较 多 额外 工作 量 的 情况 ， 这 种 情况 就 最 好 重新 进行 需求 
排 期 ， 毕 竟 是 产品 同学 设计 时 欠 考 虑 所 导致 的 问题 ， 这 是 开发 者 不 可 
控 的 ;还 有 一 种 情况 你 可 能 也 会 遇 到 ， 变 更 的 需求 涉及 比较 细节 的 非 
核心 内 容 ， 但 要 实现 的 代价 较 大 ， 这 种 情况 更 多 的 处 理 方式 是 不 接 
受 ， 或 降低 优先 级 在 核心 功能 完成 后 再 进行 处 理 。 


(2) 除了 需求 变更 ， 可 能 遇 到 的 第 二 类 问题 就 是 应 对 多 个 需求 并 
行 的 情况 ， 甚 至 可 能 同时 应 对 多 个 不 同 的 产品 经 理 的 需求 ， 而 且 每 个 
需求 都 是 不 能 马上 解决 的 。 那 么 这 时 就 需要 开发 者 做 决策 了 ， 需 求 之 
间 是 有 优先 级 关系 的 : 如 果 一 个 需求 不 马上 完成 会 明显 导致 线 上 大 的 
业务 流程 缺陷 ， 那 就 建议 先 先 从 这 个 下 手 ; 如 果 几 个 需求 都 显得 很 紧 
迫 ， 这 就 只 能 和 产品 经 理 一 起 讨论 开发 计划 。 一 心 不 能 两 用 ， 工 作 时 
间 也 不 能 double， 在 给 不 出 好 建议 的 前 提 下 ， 那 就 让 产品 经 理 自己 决 
策 好 优先 级 。 


(3) 无 法 避免 需求 风险 管理 问题 。 简 单 理解 就 是 ， 需 求 不 能 按期 
交付 ， 你 虽然 已 经 做 好 了 排 期 管理 和 需求 评估 ， 但 是 由 于 各 种 原因 
(需求 变更 或 技术 方案 变更 ) 已 经 确定 不 能 按期 完成 。 那 么 这 种 情况 


下 ， 你 需要 尽早 让 其 他 人 知道 实际 进度 。 需 求 不 能 按时 交付 ， 要 将 风 
含 尽早 地 暴露 出 来 ， 千 万 不 要 等 到 最 后 告诉 大 家 。 不 只 是 前 端 ， 各 端 
的 开发 、 设 计 人 员 甚 至 产品 经 理 如 果 在 团队 协作 时 不 能 按时 完成 协作 
任务 都 应 该 尽早 通知 其 他 人 做 好 风险 管理 工作 。 


3. 其 他 类 问题 


很 多 时 候 ， 原 先 定 好 的 开发 周期 会 因为 各 种 开会 让 开发 时 间 显 得 
不 足 ， 评 审 会 、 总 结 会 、 分 享 会 都 会 占用 时 间 。 要 相信 ， 这 是 工作 常 
态 。 这 种 情况 需要 灵活 处 理 ， 需 求 开 发 排 期 评估 时 预 留 些 缓冲 时 间 就 
可 以 解决 了 。 


7.2.4 “学 会 前 端 项 目 开发 流程 设计 


除了 完成 业务 开发 需求 ， 对 于 前 端 开发 人 员 来 说 ， 另 一 个 很 重要 
的 方面 应 该 就 是 学 会 前 端 项 目 开 发 流程 设计 的 能 力 。 这 里 说 的 前 端 项 
目 开 发 流程 设计 指 的 是 能 否 快速 地 进行 前 端 项 目 基础 工程 、 常 用 业务 
模块 以 及 开发 流程 的 搭建 能 力 。 具 体 来 说 就 是 能 否 快速 地 设计 建立 一 
个 项 目 开发 的 Codebase， 这 里 面包 括 前 端 框架 选 型 、 模 块 化 方案 、 代 
码 规范 化 、 构 建 自动 化 、 组 件 化 目录 设计 、 代 码 优 化 处 理 、 数 据 统 
计 、 同 构 项 目 结构 设计 等 ， 基 于 这 个 组 建 好 的 Codebase， 个 人 或 团队 
其 他 人 就 能 在 这 个 基础 上 直接 便捷 、 高 效 地 开发 业务 模块 了 。 


其 实 我 们 也 多 多 少 少 用 过 一 些 项 目 开发 流程 工具 ， 例 如 基础 的 构 
建 项 目 就 是 一 个 简单 的 开发 流程 ， 但 光 靠 它 是 远 远 不 够 的 ， 需 要 更 完 
善 的 补充 。 学 会 使 用 开发 流程 工具 很 简单 ， 但 要 根据 不 同 的 使 用 场景 
设计 组 建 符合 预期 的 开发 流程 工具 ， 就 要 清楚 开发 流程 中 每 个 细节 的 


实现 。 束 组 件 化 设计 来 说 ， 如 何 选 择 适合 自己 项 目的 组 件 化 管理 方案 
就 比较 重要 了 。 是 按照 文件 管理 还 是 按照 目录 管理 呢 ? 如 果 按 目录 ， 
那么 目录 怎么 设计 ?公用 组 件 目 录 和 非 公 用 组 件 目录 又 该 怎么 区 分 ? 
要 考虑 到 的 问题 可 能 会 比较 多 ， 但 无 论 如 何 需要 注意 的 一 点 是 ， 在 进 
行 开发 项 目 流程 设计 时 ， 也 不 一 定 需要 使 用 那些 最 新 的 技术 和 设计 思 
路 ， 更 建议 根据 自己 或 团队 的 具体 情况 来 决定 。 一 方面 ， 如 果 不 这 样 
做 有 可 能 会 增加 其 他 人 对 项 目的 上 手 难度 ， 或 者 后 期 维护 的 成 本 ; 另 
一 方面 ， 可 以 避免 过 度 设 计 ， 如 果 你 的 网 站 访问 量 本 来 就 比较 小 ， 就 
没 必要 用 很 复杂 的 前 、 后 人 台 架 构 了 。 


7.2.5 “持续 的 知识 和 经 验 积累 管理 


前 端 技术 发 展 很 快 ， 在 你 还 没有 深入 理解 本 书 涉 及 的 所 有 内 容 之 
前 ， 还 是 需要 学 习 的 ， 否 则 你 的 前 端 知识 体系 应 该 是 不 完整 的 。 即 使 
你 已 经 完全 理解 了 这 些 内 容 ， 你 依然 有 许多 事情 要 做 ， 例 如 你 可 能 
经 成 为 了 项 目 负责 人 或 前 端 管理 者 的 角色 ， 需 要 学 习 更 多 其 他 方面 的 
知识 ， 如 何 快 速 培养 员工 、 促 进 团队 成 员 高 效 协作 等 。 总 之 ， 持 续 性 
的 学 习 很 重要 ， 这 不 仅仅 是 针对 前 端 开发 人 员 。 


作为 前 端 开 发 者 ， 学 习 的 方式 也 有 很 多 ， 例 如 看 别人 的 技术 博 
客 、 研 究 最 新 的 技术 方向 、 疝 读 开源 代码 、 听 技术 分 享 会 、 看 些 书 
等 。 当 然 自己 分 享 知识 的 方式 也 类 似 ， 写 技术 博客 、 上 传 自己 的 研究 
成 果 、 提 交 自 己 的 开源 代码 、 去 分 享 交流 会 演讲 、 自 己 写 一 本 书 ， 如 
果 还 不 满足 ， 那 就 写 两 本 。 针 对 技术 博客 的 学 习 方 式 来 说 ， 推 荐 读者 
们 关注 一 些 更 新 较 多 的 技术 论坛 或 一 些 优秀 前 端 团队 的 技术 博客 ， 常 
去 看 看 总 会 有 些 收获 。 前 端 技术 相关 博客 论坛 也 比较 多 ， 例 如 qcon、 


infoq、 极 限 前 端 、imweb.io、 前 端 早 读 课 、fex 技 术 周 刊 、w3ctech 等 ， 
除 此 之 外 你 也 可 以 加 入 他 们 的 技术 交流 社 群 分 享 沟通 。 


天 于 前 端 学 习 ， 说 起 来 简单 ， 但 实际 上 内 容 还 是 很 多 的 。 很 多 时 
候 ， 我 们 都 不 知道 要 学 什么 ， 前 端的 知识 很 零散 ， 涉 及 的 方面 很 广 ， 
看 了 别人 的 很 多 博客 ， 但 都 感觉 只 是 了 解 点 点 面 面 ， 没 能 完全 体系 化 
地 学 会 。 本 书 就 是 要 帮 大 家 解决 这 个 问题 ， 书 中 的 前 几 章 涉及 的 内 容 
通过 几 条 主线 涵盖 了 目前 前 端 方面 几乎 所 有 的 技术 知识 和 设计 原理 ， 
按照 这 些 方向 去 研究 挖掘 就 可 以 基本 了 解 前 端 需要 掌握 的 所 有 知识 
了 。 


7.2.6 ”切忌 过 分 仍 求 技术 


持续 性 的 学 习 积 累 和 分 享有 助 于 我 们 快速 地 提升 自己 的 知识 面 和 
技术 能 力 ， 但 是 也 要 注意 一 点 ,一切 技 术 的 最 终 目的 都 是 为 产品 实现 
服务 的 。 技 术 研究 应 该 是 在 完成 并 希望 将 产品 打造 更 好 的 目的 上 进行 
的 ， 切 忌 过 分 追求 技术 ， 让 自己 沉迷 在 探索 技术 的 道路 上 。 我 们 学 习 
技术 的 根本 目的 还 是 要 为 产品 输出 服务 ， 虽 然 需要 一 段 较 长 的 时 间 来 
积 囚 技术 和 提升 能 力 ， 但 是 对 技术 过 分 地 苛求 反而 会 在 产品 业务 的 实 
现 支 持 上 一 团 糟 。 如 果 你 已 经 进入 了 管理 者 的 角色 ， 就 该 快速 转型 为 
管理 角色 ， 更 多 从 管理 者 的 角度 上 为 整个 团队 服务 ， 不 该 再 按照 工程 
师 的 思维 延续 下 去 ， 对 技术 细节 过 分 追求 。 


7.2.7 ”必要 的 产品 设计 思维 


作为 前 端 工程 师 ， 我 们 常常 在 做 的 事情 是 将 产品 需求 和 设计 的 功 
能 实现 ， 然 后 添加 上 必要 的 辅助 数据 上 报 ， 那 么 页 面 就 基本 可 以 上 线 
了 。 但 是 ， 有 经 验 的 工程 师 开 发 需求 时 除了 实现 需求 ， 做 的 另 一 件 事 
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是 思考 这 个 需求 为 什么 是 这 样 的 呢 ? 是 不 是 合理 呢 ? 如 果 不 合理 该 
怎么 修改 呢 ? 很 多 时 候 产 品 人 员 不 懂 开 发 知识 ， 设 计 细 世 时 都 是 站 在 
用 户 的 角度 上 思考 ， 功 能 设计 都 比较 主观 ， 从 而 可 能 会 出 现 很 多 问 


题 。 


举 个 例子 ， 某 个 产品 交互 稿 希望 在 移动 端 页 面 最 底部 放置 一 个 固 
定 提交 按钮 ， 这 样 用 户 在 手机 屏幕 最 下 面 点 击 提交 就 可 以 了 ， 方便 用 
户 单 手 操作 。 这 个 设计 本 身 是 很 好 的 ， 但 表单 项 个 数 是 不 确定 的 ， 设 
计 最 后 就 照 做 了 一 个 宽度 80pxx 高 度 30px 的 提交 按钮 ， 设 计 稿 很 完 
美 ， 表 单 和 按钮 设计 都 很 漂亮 。 但 如 果 按 照 设计 稿 完成 ， 就 会 发 现 问 
题 : 从 用 户 的 角度 上 来 看 ， 按 钮 太 小 ， 点 击 不 方便 ;从 开发 角度 上 来 
看 ， 表 单项 较 多 时 表单 后 面 的 填写 项 会 被 底部 固定 的 提交 按钮 挡住 ， 
这 时 需要 将 提交 按钮 区 域 和 表单 区 域 用 颜色 区 分 开 来 才 合 理 。 所 以 ， 
如 果 前 端 工程 师 经 常 做 前 端 页 面 的 交互 实现 的 话 ， 是 会 有 一 定 产品 设 
计 思 路 的 ， 知 道 一 些 常见 需求 实现 的 漏洞 和 问题 ， 表 结合 自己 的 专业 
开发 知识 ， 这 两 个 问题 便 可 以 在 需求 阶段 就 过 滤 掉 了 。 


什么 是 产品 思维 ?通俗 地 讲 就 是 用 户 体验 思维 ， 或 者 说 是 将 自己 
当成 普通 用 户 来 对 产品 进行 思考 。 因 为 一 切 互联 网 产品 的 设计 最 终 都 
是 给 用 户 使 用 的 ， 所 以 产品 经 理 设计 功能 时 也 应 该 尽 可 能 站 在 用 户 的 
角度 上 去 思考 设计 ， 开 发 者 也 可 以 从 一 个 用 户 的 角度 上 去 思考 产品 。 


除 此 之 外 ， 作 为 前 端 工程 师 ， 强 烈 建议 大 家 去 看 一 两 本 关于 产品 
经 理 方面 的 书籍 。 一 是 作为 整个 产品 项 目 流程 的 下 游 实 现 者 ， 有 必要 
去 了 解 一 个 互联 网 产品 的 生命 周期 是 怎样 的 ， 二 是 学 习 一 些 常 用 的 产 


品 设 计 常 识 ， 在 一 定 程度 上 学 会 分 析 需 求 的 漏洞 和 完整 性 。 当 然 这 是 
比较 理想 的 情况 ， 有 兴趣 的 读者 可 以 去 看 看 。 


7.3 “本章 小 结 


这 一 章 主 要 分 析 了 未 来 前 端 技术 发 展 的 趋势 ， 告 诉 大 家 如 何 成 为 
一 名 优秀 的 前 端 工程 师 。 关 于 如 何 成 为 一 名 优秀 的 前 端 工 程 师 ， 个 人 
觉得 以 上 这 些 方 面 都 是 应 该 考虑 去 做 的 。 但 这 仅 代 表 个 人 观点 ， 如 果 
你 有 更 好 的 建议 或 想法 ， 也 欢迎 向 笔者 推荐 。 


未 来 前 端 技 术 仍 会 不 断 变化 ， 新 的 领域 也 会 出 现 ， 而 我 们 要 做 的 
就 是 不 筷 初 心 ， 坚 持 前 端 学 习 的 方法 论 ， 不断 扩 充 和 升级 自己 的 知识 
储备 ， 做 一 名 优秀 的 前 端 工程 师 。 如 果 你 对 本 书 的 内 容 感 兴 趣 或 觉得 
还 有 哪些 知识 内 容 没 有 了 解 ， 也 可 以 向 笔者 提出 。 和 希望 你 喜欢 本 书 ， 
并 且 期 待 第 二 版 。 在 第 二 版 中 ， 笔 者 将 会 邀请 更 多 行内 有 经 验 的 开发 
者 一 起 完善 改进 ， 让 内 容 更 加 丰富 。 最 后 ， 非 常 感谢 读 完 这 本 书 ， 囊 
心 希望 读者 都 能 从 中 有 所 收益 。 


